Nucleus Powered Mitochondria

    This package has been deprecated

    Author message:

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

    interpolate-components

    1.1.1 • Public • Published

    Interpolate-Components

    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().

    NPM

    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>

    Testing

    # install dependencies 
    npm install
    # run tests 
    npm test

    Install

    npm i interpolate-components

    DownloadsWeekly Downloads

    5,447

    Version

    1.1.1

    License

    GPL-2.0

    Last publish

    Collaborators

    • chihsuan
    • manzoorwanijk
    • adekbadek
    • rjchow
    • andrea-sdl
    • scjr
    • spsiddarthan
    • t2dw4t
    • ehg_
    • wwa
    • sirreal
    • elazzabi
    • royho
    • obliviousharmony
    • luismulinari
    • macbre
    • mjangda
    • matticbot
    • djalmaaraujo
    • brunobasto
    • a8c
    • nickdaugherty
    • blowery
    • noahtallen
    • hanifn
    • sgomes
    • tyxla
    • rrinat
    • netsuso
    • saroshaga
    • parkcityj
    • nejclovrencic
    • sirbrillig
    • samiff
    • chriszarate
    • robersongomes
    • johngodley
    • gwwar
    • rralian
    • ockham