uinaf/react-json-logic

Build and evaluate JsonLogic rules with React components.

react-json-logic is headless. No CSS is shipped. You style it however you want.

Installation

pnpm add react-json-logic react react-dom

Requires React 19 (react / react-dom peer ^19.0.0).

Basic Usage

import { useState } from "react";
import JsonLogicBuilder, { applyLogic, type JsonLogicValue } from "react-json-logic";

function Example() {
  const [rule, setRule] = useState<JsonLogicValue>("");
  const data = { user: { age: 21 } };

  return (
    <>
      <JsonLogicBuilder value={rule} data={data} onChange={setRule} />
      <p>Result: {String(applyLogic(rule, data))}</p>
    </>
  );
}

API Overview

• Default export: JsonLogicBuilder
• Named exports: applyLogic, rule, validate, OPERATORS, FIELD_TYPES
• Core types: JsonLogicBuilderProps, 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). The full attribute table is in the package README.

Building Rules in Code

Use the typed rule factory to construct rules without hand-writing JSON:

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)

Contributing

Setup, workflow, and release notes: CONTRIBUTING.md.

Security

See SECURITY.md.

License

MIT