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
- Install the latest version of react and react-interpolate:
npm install --save react @trendmicro/react-interpolate
- 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
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent