Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
96 lines (71 sloc) 1.92 KB
date title template thumbnail slug categories tags
2019-08-09
Using react-intl-hooks
post
../thumbnails/js.png
using-react-intl-hooks
Tools
JavaScript
i18n

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.

You can’t perform that action at this time.