i18next-react-component-postprocessor

1.0.5 • Public • Published

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);
 

Package Sidebar

Install

npm i i18next-react-component-postprocessor

Weekly Downloads

1

Version

1.0.5

License

MIT

Unpacked Size

6.74 kB

Total Files

3

Last publish

Collaborators

  • maxim-leont