With yarn
:
yarn add estafette-intl
With npm
:
npm install estafette-intl
Steps:
- Create internalization
- Create messages
- Use internalization using useIntl
import { CreateIntl } from 'estafette-intl';
ReactDOM.render(
<CreateIntl defaultLocale="en" messages={messages}>
<App />
</CreateIntl>,
document.getElementById('root'),
);
import { createMessages } from 'estafette-intl';
const messages = createMessages([
{
gretting: {
en: 'Hello, {name}!',
},
},
]);
import { useIntl } from 'estafette-intl';
const App = () => {
const { t } = useIntl();
return <h1>{t('gretting', { name: 'Vladimir Josan' })}</h1>;
};
Internalization creator
defaultLocale
(String) - it can be simple string, that you will be able to change fromuseIntl
usingsetLocale
messages
(Object) -Messages
fromcreateMessage
function helper, gets array of messages, parses all of them into an object and checks for dublicates
messages
(Array) -Messages
typescript interface
interface Messages {
[locale: string]: {
[lang: string]: string;
};
}
hook helper for using internalization
t
(Function) - a function that requireslocale
(String) argument and returns bylocale
keyword necessary textlocale
(String) - current localesetLocale
(Function) - a function that requiresnewLocale
(String) argument and change current locale to the new locale.