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