Skip to content

A React component that renders elements into a format string containing replacement fields.

License

Notifications You must be signed in to change notification settings

trendmicro-frontend/react-interpolate

Repository files navigation

react-interpolate build status Coverage Status

NPM

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
  1. 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