i18next-react-component-postprocessor
v1.0.5
Published
i18next react component postprocessor
Downloads
15
Maintainers
Readme
i18next-react-component-postprocessor
Introduction
If you want to insert some interactive component into the i18next string, for example link, you must concatenate strings and component. And when it is a React component it may be impossible. This package helps to insert React components in the i18next string.
Getting started
npm i --save i18next-react-component-postprocessor
import i18next from 'i18next';
import I18nReact from 'i18next-react-component-postprocessor';
const config = {
postProcess: ['i18nReact']
}
i18next.use(new I18nReact()).init(config);
Usage
{
"key": "Go to <Link title='our company' text='our web site' /> now"
}
<p>
{
i18next.t('key', {
Link: ({ title, text }) => <a href="#" title={title}>{text}</a>
})
}
</p>
Default props
Bold
| props | type | value | | ------|:-----:|:-----:| | text | String | empty |
Italic
| props | type | value | | ------|:-----:|:-----:| | text | String | empty |
Link
| props | type | value | | ------|:-----:|:-----:| | text | String | empty | | alt | String | empty | | href | String | # |
Customize
import i18next from 'i18next';
import I18nReact from 'i18next-react-component-postprocessor';
const config = {
postProcess: ['i18nReact']
}
i18next.use(new I18nReact({
Link: ({href, text, alt}) => <div>{href} {text}</div>
})).init(config);