React context provider and component for nanotranslate
Set the current dictionary once at the top-level with a provider, and it will pass down via React context.
$ npm install --save react-nanotranslate
const {Provider, Translate} = require('react-nanotranslate')
const {render} = require('react-dom')
const dictionary = {
id: 'en_US',
values: {
HELLO: 'Hello, {{name}}.'
}
}
function App () {
return <Provider dictionary={dictionary}><SomeChild /></Provider>
}
function SomeChild () {
return <Translate id={'HELLO'} data={{name: 'Bob'}} />
}
render(App, document.body)
// => <span>Hello, Bob.</span>You can see an interactive version of this here: https://codesandbox.io/s/mjY74g73
Props
- dictionary (required): A nanotranslate dictionary. Makes the dictionary available to
<Translate>components in the hierarchy below.
Returns a span with a translated string inside of it.
id and data will be passed to nanotranslate: translate(id, data).
Requires a react-nanotranslate Provider as an ancestor.
Props
- id (required): The key of translation value in your dictionary.
- data (optional, default
undefined): Data to pass into nanotranslate's templating. - tagName (optional, default
'span'): The tag name of the lement that the translated value will be placed in.
All other props (eg className) are forwarded to the created element.
When you need access to the raw nanotranslate instance from the react context, use this. Example:
const {TranslateRaw} = requrie('react-nanotranslate')
function MyComponent () {
return <TranslateRaw>
{(translate) => {
return <SomethingFun>{translate('HELLO', {name: 'Bob'})}</SomethingFun>
}}
</TranslateRaw>
}MIT © Andrew Joslin