Liquid templating language component for React
- Install
- Basic Usage
- Extending the Liquid Engine
- Rendering HTML
- Custom rendering via render prop
- useLiquid hook
- License
npm install --save react-liquid
or
yarn add react-liquid
The component will automatically update when template or data are updated via state or props.
import React, { Component } from 'react' import { ReactLiquid } from 'react-liquid' class Example extends Component { render() { const template = 'Hello, {{ name }}' const data = { name: 'aquibm', } return <ReactLiquid template={template} data={data} /> } }
You can add your own filters and tags to the liquid engine, more information here.
import React, { Component } from 'react' import { ReactLiquid, liquidEngine } from 'react-liquid' class Example extends Component { constructor(props) { super(props) liquidEngine.registerFilter('add', (initial, arg1, arg2) => { return initial + arg1 + arg2 }) } render() { return <ReactLiquid template="{{ 1 | add: 2, 3 }}" /> } }
HTML can be dangerously injected by supplying the html prop
import React, { Component } from 'react' import { ReactLiquid } from 'react-liquid' class Example extends Component { render() { const template = '<p style="color: tomato;">{{ name }}</p>' const data = { name: 'aquibm', } return <ReactLiquid template={template} data={data} html /> } }
You can render however you'd like by passing through a render prop
import React, { Component } from 'react' import { ReactLiquid } from 'react-liquid' class Example extends Component { render() { const template = '<p style="color: tomato;">{{ name }}</p>' const data = { name: 'aquibm', } return ( <ReactLiquid template={template} data={data} render={(renderedTemplate) => { console.log('Woohoo! New Render!') return <span dangerouslySetInnerHTML={renderedTemplate} /> }} /> ) } }
From version 2.x onwards, you can render markdown using the useLiquid hook.
At the moment, we use
JSON.stringify( data )between render cycles to determine whether we need to re-render the markdown. This is inherently slow and should only be used when data is small and not overly nested. Read more here
import React from 'react' import { useLiquid, RENDER_STATUS } from 'react-liquid' const MyAwesomeComponent = ({ template, data }) => { const { status, markup } = useLiquid(template, data) return ( <div> {status === RENDER_STATUS.rendering && <div>Rendering...</div>} <div dangerouslySetInnerHTML={{ __html: markup }} /> </div> ) }
MIT © Aquib Master