ui-predicate-react

    1.1.0 • Public • Published

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

    Keywords

    none

    Install

    npm i ui-predicate-react

    DownloadsWeekly Downloads

    6

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    350 kB

    Total Files

    6

    Last publish

    Collaborators

    • fgribreau