@entva/react-polyglot
v2.0.0-beta.0
Published
A React wrapper for node-polyglot
Downloads
4
Maintainers
Readme
@entva/react-polyglot
A React wrapper for node-polyglot.
API:
You need to use the <International />
wrapper around your app to create a node-polyglot instance and to provide context to your components.
import International from '@entva/react-polyglot';
const locale = {
type: 'de',
dictionary: {
greeting: 'Hallo!',
},
// anything else locale related
};
<International locale={locale}>
<App />
</International>
<International />
component takes a locale
object prop with following:
type
: string, name of the locale, for possible values check here.dictionary
: object, same asphrases
object one would pass to node-polyglot.- anything else you pass will be available to every component connected to the context. Use this object to store locale specific configurations, like first day of the week.
T
T
is a component that allows for JSX within your substitutions options. Use it when you need to use JSX or accessing t
function is inconvenient.
import { T } from '@entva/react-polyglot';
const locale = {
dictionary: {
substitution: 'I have come here to chew %{variable_1} and kick %{variable_2}... and I\'m all out of %{variable_1}.',
},
};
const MyComponent = ({ t, locale }) => (
<T
id="substitution"
variable_1={<strong onClick={() => alert('🍬')}>bubblegum</strong>}
variable_2={<em onClick={() => alert('🍑')}>ass</em>}
/>
);
// => I have come here to chew bubblegum and kick ass... and I'm all out of bubblegum.
Hooks: useInternational, useLocale, useT
useInternational
, useLocale
and useT
are hooks that allow access to the locale context. useInternational
is the main hook, useLocale
and useT
are convenience shortcuts.
import { useInternational, useLocale, useT } from '@entva/react-polyglot';
const MyComponent = ({ t, locale }) => {
const { t, locale } = useInternational();
// or
const locale = useLocale();
// or
const t = useT();
// ...
};