react-interpolate

A React component that renders elements into a format string containing replacement fields. It comes in handy when working with dynamic text elements like localized strings of a translation library.

Demo: https://trendmicro-frontend.github.io/react-interpolate

Installation

1. Install the latest version of react and react-interpolate:

npm install --save react @trendmicro/react-interpolate

2. Install react-interpolate` with @trendmicro scope:

import Interpolate from '@trendmicro/react-interpolate';

Usage

Object Keys

<Interpolate
    replacement={{
        number: (
            <span
                style={{
                    border: '1px solid #ccc',
                    padding: '5px 10px'
                }}
            >
                20
            </span>
        )
    }}
>
    {'{{number}} groups enabled'}
</Interpolate>

Array Keys

<Interpolate
    replacement={[
        <i>{'2017-01-01T00:00:00Z'}</i>,
        <i>{'2017-01-10T23:59:59Z'}</i>
    ]}
>
    {'From {{0}} to {{1}}'}
</Interpolate>

API

Properties

Name	Type	Default	Description
format	String
parent	String	'span'
prefix	String	{{
suffix	String	}}
replacement	Array|Object

License

MIT