i18next-react-component-postprocessor

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

Italic

Link

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