A react hook that interpolates markup tags into components
npm i use-interpolate
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>
This hook parses the given string and returns a render
function that interpolates markup tags into components.
This is a tag prefix option. The default is <
.
This is a tag suffix option. The default is >
.
This is a strict option to parse. The default is true
.
This function interpolates markup tags to the components from the parsed result.
const render = useInterpolate('hello <0 /> word')
return <div>{render({ 0: <br/> })}</div> // => <div>hello <br /> word</div>
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>
MIT