Liquid templating language component for React
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode
example
src
.babelrc
.editorconfig
.eslintrc
.gitignore
.travis.yml
LICENSE.md
README.md
package-lock.json
package.json
rollup.config.js

README.md

react-liquid

Liquid templating language component for React

NPM

Install

npm install --save react-liquid

or

yarn add react-liquid

Basic Usage

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} />
    }
}

Extending the Liquid Engine

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 }}" />
    }
}

License

MIT © Aquib Master