Package Exports

use-interpolate

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (use-interpolate) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

use-interpolate 📃

A react hook that interpolates markup tags into components

Install

npm i use-interpolate

Example

import useInterpolate from 'use-interpolate'

function App () {
    const render = useInterpolate('<wrap>My name is <name /> and I am <age /> years old.</wrap>')

    const components = {
        wrap: children => <Content>{children}</Content>,
        name: <input type="text" />,
        age: <input type="number" />
    }

    return <div>{render(components)}</div>
}

<div>
    <Content>
        My name is <input type="text" /> and I am <input type="number" /> years old.
    </Content>
</div>

API

useInterpolate(string, options?)

This hook parses the given string and returns a render function that interpolates markup tags into components.

options

prefix

This is a tag prefix option. The default is <.

suffix

This is a tag suffix option. The default is >.

strict

This is a strict option to parse. The default is true.

render(components?)

This function interpolates markup tags to the components from the parsed result.

const render = useInterpolate('hello <0 /> word')

return <>{render({ 0: <br/> })}</> // => <>hello <br /> word</>

There is a way to interpolate using functions.

const render = useInterpolate('<0>hello word</0>')

return <>{render({ 0: children => (<p>{children}</p>) })}</> // => <><p>hello word</p></>

License

MIT