Liquid templating language component for React
npm install --save react-liquidor
yarn add react-liquidThe 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 />
}
}MIT © Aquib Master