@ttoss/i18n
v1.16.1
Published
## π About
Downloads
11
Readme
@ttoss/i18n
π About
@ttoss/i18n is a easiest way to use translations in your React application.
π Get Started
Install @ttoss/i18n
$ yarn add @ttoss/i18n
# or
$ npm install @ttoss/i18n
π Examples of use
Index.tsx
Import the I18nProvider and wrap your application with it. Add to it a function called loadLocaleData
to load all the translation data.
import { I18nProvider, LoadLocaleData } from '@ttoss/i18n';
const loadLocaleData: LoadLocaleData = (locale) => {
switch (locale) {
case 'pt-BR':
return import('../i18n/compiled-lang/pt-BR.json');
default:
return import('../i18n/compiled-lang/en.json');
}
};
ReactDOM.render(
<I18nProvider
locale={window.navigator.language}
loadLocaleData={loadLocaleData}
>
<App />
</I18nProvider>,
document.getElementById('root')
);
App.tsx
Then import the useI18n hook and extract the intl, to get access to the formatMessage
function and many others (using defineMessages
is optional).
import { useI18n, defineMessages } from '@ttoss/i18n';
const messages = defineMessages({
myNameIs: {
description: 'My name is',
defaultValue: 'My name is {name}',
},
});
const App = () => {
const { intl, setLocale } = useI18n();
const [name, setName] = React.useState('Rayza');
return (
<div>
<div>
<button onClick={() => setLocale('en-US')}>en-US</button>
<button onClick={() => setLocale('pt-BR')}>pt-BR</button>
</div>
<input value={name} onChange={(e) => setName(e.target.value)} />
<h3>{intl.formatMessage(messages.myNameIs, { name })}</h3>
</div>
);
};
export default App;
π Extracted translations
Commands to extract and compile
To extract the translations run the command yarn i18n:extract
, and to compile use yarn i18n:compile
Extract
yarn i18n:extract
Compile
yarn i18n:compile
{
"IDLw9V": {
"defaultMessage": "My name is {name}.",
"description": "My name is"
},
"tPkQ38": {
"defaultMessage": "Congrats",
"description": "Congrats"
}
}
{
"IDLw9V": {
"defaultMessage": "Meu nome Γ© {name}.",
"description": "My name is"
},
"tPkQ38": {
"defaultMessage": "ParabΓ©ns",
"description": "Congrats"
}
}
π Types
import { MessageFormatElement } from 'react-intl';
export type MessageType = any;
export type LoadLocaleData = (locale: string) => Promise<MessagesType>;
export type I18nProviderProps = {
locale?: string;
loadLocaleData?: LoadLocaleData;
};