https://github.com/uinaf/react-json-logic
Build and evaluate JsonLogic with React components
https://github.com/uinaf/react-json-logic
builder component json logic react ui
Last synced: 19 days ago
JSON representation
Build and evaluate JsonLogic with React components
- Host: GitHub
- URL: https://github.com/uinaf/react-json-logic
- Owner: uinaf
- License: mit
- Created: 2017-01-02T14:43:38.000Z (over 9 years ago)
- Default Branch: main
- Last Pushed: 2026-05-18T01:46:19.000Z (25 days ago)
- Last Synced: 2026-05-18T09:55:58.834Z (25 days ago)
- Topics: builder, component, json, logic, react, ui
- Language: TypeScript
- Homepage: https://uinaf.dev/projects/react-json-logic
- Size: 570 KB
- Stars: 27
- Watchers: 1
- Forks: 23
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Security: SECURITY.md
- Agents: AGENTS.md
Awesome Lists containing this project
README
# react-json-logic
Build and evaluate [JsonLogic](http://jsonlogic.com) rules with React components.
`react-json-logic` is headless. No CSS is shipped. You style it however you want.
## Installation
```bash
pnpm add react-json-logic react react-dom
```
## Basic Usage
```tsx
import { useState } from "react";
import JsonLogicBuilder, { applyLogic, type JsonLogicValue } from "react-json-logic";
function Example() {
const [rule, setRule] = useState("");
const data = { user: { age: 21 } };
return (
<>
Result: {String(applyLogic(rule, data))}
>
);
}
```
## API Overview
- Default export: `JsonLogicBuilder`
- Named exports: `applyLogic`, `rule`, `validate`, `OPERATORS`, `FIELD_TYPES`
- Core types: `JsonLogicValue`, `JsonLogicData`, `ValidationResult`, `ValidationError`
### Component Props
- `value: JsonLogicValue` - controlled current rule
- `onChange: (value: JsonLogicValue) => void` - called whenever the rule changes
- `data?: JsonLogicData | string` - sample data for accessor suggestions (`var`)
- `onDataError?: (err: unknown, raw: string) => void` - parse error hook when `data` is a string
## Styling
Use stable `data-rjl-*` attributes to style the rendered DOM (for example with Tailwind, CSS Modules, or vanilla CSS).
Common hooks include:
- `data-rjl-builder`
- `data-rjl-any`
- `data-rjl-field`
- `data-rjl-add`
- `data-rjl-remove`
- `data-rjl-operator-trigger`
- `data-rjl-operator-popup`
- `data-rjl-input-value`
- `data-rjl-accessor-input`
- `data-rjl-higher-order`
## Building Rules in Code
Use the typed `rule` factory to construct rules without hand-writing JSON:
```ts
import { applyLogic, rule, validate } from "react-json-logic";
const r = rule.and(rule.eq(rule.var("user.age"), 21), rule.gt(rule.var("score"), 100));
applyLogic(r, { user: { age: 21 }, score: 150 }); // true
validate(r); // { ok: true }
```
## Repo and Development
This repository is a workspace with:
- `packages/react-json-logic` (publishable npm package)
- `apps/example` (demo app)
From the workspace root:
```bash
vp install
pnpm verify
pnpm dev:example
```
## Contributing
See [CONTRIBUTING.md](CONTRIBUTING.md).
## Security
See [SECURITY.md](SECURITY.md).
## License
[MIT](LICENSE)