ui-predicate-react

ReactJS ui-predicate component

Introduction

ui-predicate-react is a rules editor, predicates component, for React JS. It aims to provide a clean, semantic and reusable component that make building your filtering or rules user interface a breeze.

Documentation

Checkout the getting-started, storybook or the API documentation.

One minute Quick-start

Read the code or try it online.

Installation

# npm
npm install ui-predicate-react -S

# yarn
yarn add ui-predicate-react

Setup

import { UIPredicate } from "ui-predicate-react";

const schema = {
  predicate: {
    logicalType_id: "all",
    predicates: [
      {
        target_id: "article.title",
        operator_id: "is",
        argument: "42",
      },
    ],
  },
  columns: {
    targets: [
      {
        target_id: "article.title",
        label: "Article title",
        type_id: "string",
      },
    ],
    operators: [
      {
        operator_id: "is",
        label: "is",
        argumentType_id: "smallString",
      },
    ],
    types: [
      {
        type_id: "string",
        operator_ids: ["is"],
      },
    ],
    logicalTypes: [
      {
        logicalType_id: "all",
        label: "All",
      },
    ],
    argumentTypes: [
      {
        argumentType_id: "smallString",
        component: function TextArgument({ value, onChange }) {
          return (
            <input
              type="text"
              value={value || ""}
              onChange={(e) => onChange(e.target.value)}
            />
          );
        },
      },
    ],
  },
};

export default function App() {
  const [ast, setAST] = useState({});
  const { predicate, columns } = schema;
  return (
    <UIPredicate predicate={predicate} columns={columns} onChange={setAST} />
  );
}