https://github.com/aquibm/react-liquid
Liquid templating language component for React
https://github.com/aquibm/react-liquid
liquid liquid-engine liquid-templating-engine react
Last synced: 8 months ago
JSON representation
Liquid templating language component for React
- Host: GitHub
- URL: https://github.com/aquibm/react-liquid
- Owner: aquibm
- License: mit
- Created: 2018-12-31T03:10:47.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-03-04T03:03:57.000Z (over 3 years ago)
- Last Synced: 2025-10-11T02:29:41.823Z (8 months ago)
- Topics: liquid, liquid-engine, liquid-templating-engine, react
- Language: JavaScript
- Homepage:
- Size: 2.03 MB
- Stars: 68
- Watchers: 1
- Forks: 10
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# react-liquid
> Liquid templating language component for React
[](https://www.npmjs.com/package/react-liquid)
- [Install](#install)
- [Basic Usage](#basic-usage)
- [Extending the Liquid Engine](#extending-the-liquid-engine)
- [Rendering HTML](#rendering-html)
- [Custom rendering via render prop](#custom-rendering-via-render-prop)
- [useLiquid hook](#useliquid-hook)
- [License](#license)
## Install
```bash
npm install --save react-liquid
```
or
```bash
yarn add react-liquid
```
## Basic Usage
The component will automatically update when template or data are updated via state or props.
```jsx
import React, { Component } from 'react'
import { ReactLiquid } from 'react-liquid'
class Example extends Component {
render() {
const template = 'Hello, {{ name }}'
const data = {
name: 'aquibm',
}
return
}
}
```
## Extending the Liquid Engine
You can add your own filters and tags to the liquid engine, [more information here.](https://github.com/harttle/liquidjs#register-filters)
```jsx
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
}
}
```
## Rendering HTML
HTML can be dangerously injected by supplying the `html` prop
```jsx
import React, { Component } from 'react'
import { ReactLiquid } from 'react-liquid'
class Example extends Component {
render() {
const template = '
{{ name }}
'
const data = {
name: 'aquibm',
}
return
}
}
```
## Custom rendering via render prop
You can render however you'd like by passing through a render prop
```jsx
import React, { Component } from 'react'
import { ReactLiquid } from 'react-liquid'
class Example extends Component {
render() {
const template = '
{{ name }}
'
const data = {
name: 'aquibm',
}
return (
{
console.log('Woohoo! New Render!')
return
}}
/>
)
}
}
```
## useLiquid hook
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](https://twitter.com/dan_abramov/status/1104414272753487872)
```jsx
import React from 'react'
import { useLiquid, RENDER_STATUS } from 'react-liquid'
const MyAwesomeComponent = ({ template, data }) => {
const { status, markup } = useLiquid(template, data)
return (
{status === RENDER_STATUS.rendering && Rendering...}
)
}
```
## License
[MIT](LICENSE.md) © Aquib Master