This package has been deprecated

Author message:

This package has been renamed to @automattic/interpolate-components


1.1.1 • Public • Published


Interpolate-Components allows us to work with structured markup as strings and then hydrate them into a tree of React components. This is particularly useful for internationalizing strings, where a sentence or paragraph containing structured markup should be translated as a single entity. This module allows us to interpolate components into a string without using the hack of dangerouslySetInnerHTML().


Module Footprint

Interpolate-Components takes a single options object as an argument and returns a React component containing structured descendent components which can be rendered into a document. The option attributes are:

  • mixedString A string that contains component tokens to be interpolated
  • components An object with components assigned to named attributes
  • throwErrors (optional) Whether errors should be thrown (as in pre-production environments) or we should more gracefully return the un-interpolated original string (as in production). This is optional and is false by default.

Component tokens

Component tokens are strings (containing letters, numbers, or underscores only) wrapped inside double-curly braces and have an opening, closing, and self-closing syntax, similar to html.

// example component token syntax
var example = '{{link}}opening and closing syntax example{{/link}}',
    example2 = 'Here is a self-closing example: {{input/}}';

Example Usage

/** @jsx React.DOM */
import interpolateComponents from 'interpolate-components';
const children = interpolateComponents( {
        mixedString: 'This is a {{em}}fine{{/em}} example.',
        components: { em: <em /> }
    } );
const jsxExample = <p>{ children }</p>;
// when injected into the doc, will render as:
// <p>This is a <em>fine</em> example.</p>


# install dependencies 
npm install
# run tests 
npm test

Package Sidebar


npm i interpolate-components

Weekly Downloads






Last publish


  • porada
  • imranh920
  • gmjuhasz
  • rcarvalho
  • briowill
  • bgrgicak
  • dhenridev
  • daledupreez-a8c
  • jeherve
  • yuliyan
  • micbosia8c
  • jeremy.yip
  • wpvip-bot
  • etobiesen
  • kzoschke
  • brunobasto
  • kat3samsin
  • fmfernandes
  • newspack
  • robertsreberski_a8c
  • msurdi-a8c
  • chihsuan
  • manzoorwanijk
  • rjchow
  • andrea-sdl
  • scjr
  • spsiddarthan
  • t2dw4t
  • ehg_
  • wwa
  • sirreal
  • elazzabi
  • royho
  • luismulinari
  • macbre
  • mjangda
  • matticbot
  • a8c
  • blowery
  • noahtallen
  • hanifn
  • sgomes
  • tyxla
  • saroshaga
  • parkcityj
  • nejclovrencic
  • sirbrillig
  • chriszarate
  • robersongomes
  • johngodley
  • gwwar
  • rralian
  • ockham