Preparing an example
Let's say you want to internationalize a component that renders the text "Hello World"
const Register = props=> {
return <div>Hello World</div>
}
export default Register;
Let's also say that your team decided to use a single approach internationalizing your components and decided to use the HOC pattern from 'react-intl'.
HOC pattern
import { injectIntl } from 'react-intl';
const Register = props => {
const t = props.intl.formatMessage;
return <div>{t({ id: 'general.helloWorld' })}</div>
}
export default injectIntl(Register);
If you were to use the HOC approach, it would take you 4 steps:
// 1. Import injectIntl
import { injectIntl } from 'react-intl';
// 2. Wrap Register in an HOC
export default injectIntl(Register);
// 3. Get formatMessage prop
const t = props.intl.formatMessage;
// 4. Replace Hello World
t({ id: 'general.helloWorld' })
React Hooks pattern
import { useFormatMessage } from '@comparaonline/react-intl-hooks';
const Register = props => {
const t = useFormatMessage();
return <div>{t('general.helloWorld')}</div>
}
export default Register;
However, if we use a react hook from 'react-intl-hooks', it will only take 3 steps:
// 1. Import useFormatMessage
import { useFormatMessage } from '@comparaonline/react-intl-hooks';
// 2. Setup useFormatMessage hook
const t = useFormatMessage();
// 3. Replace "Hello World"
t('general.helloWorld')
Conclusion
We only a removed single step and might not seem much, but imagine if you have to internationalize a large codebase, it might just save you some time.