React Rules

A flexible React component for building and managing business rules with json-rules-engine.

Installation

npm install react-rules

Usage

Here's a basic example of how to use the RuleEditor component:

import React from 'react';
import { RuleEditor } from 'react-rules';

export const facts = [
  { value: 'temperature', label: 'Temperature' },
  { value: 'humidity', label: 'Humidity' },
];

export const operators = [
  { value: 'equal', label: '==' },
  { value: 'notEqual', label: '!=' },
  { value: 'lessThan', label: '<' },
  { value: 'lessThanInclusive', label: '<=' },
  { value: 'greaterThan', label: '>' },
  { value: 'greaterThanInclusive', label: '>=' },
];

export const events = [
  { value: 'set_thermostat', label: 'Set Thermostat' },
  { value: 'set_fan', label: 'Set Fan' },
];

const rules = [
  {
    "conditions": {
      "all": [
        {
          "fact": "temperature",
          "operator": "lessThan",
          "value": 20
        }
      ]
    },
    "event": {
      "type": "set_thermostat",
      "params": {
        "value": 22
      }
    }
  }
]

const App: React.FC = () => (
    <RuleEditor
      value={JSON.stringify(rules)}
      onChange={console.log}
      facts={facts}
      operators={operators}
      events={events}
    />
);

export default App;

Props

RuleEditor Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | value | string | Yes | - | JSON string of rules array | | onChange | (rules: string) => void | No | - | Callback when rules change | | facts | Fact[] | Yes | - | Available facts for conditions | | operators | Operator[] | Yes | - | Available operators for conditions | | events | Event[] | Yes | - | Available events for rule outcomes | | styles | Partial<StyleObject> | No | {} | Custom styles object | | labels | LabelObject | No | {} | Custom labels for UI text | | engine | Engine | No | - | Custom json-rules-engine instance with pre-configured operators | | showRuleTester | boolean | No | true | Whether to show the built-in rule tester |

RuleTester Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | rules | RuleProperties[] | Yes | - | Array of rules to test | | facts | Fact[] | Yes | - | Available facts for testing | | styles | Partial<StyleObject> | No | {} | Custom styles object | | engine | Engine | No | - | Custom json-rules-engine instance |

Custom Operators

You can extend the rules engine with custom operators by providing a pre-configured Engine instance:

import React from 'react';
import { Engine, Operator } from 'json-rules-engine';
import { RuleEditor } from 'react-rules';

// Create custom operators
const customEngine = new Engine();
const betweenOperator = new Operator('between', (factValue, [min, max]) => {
  return factValue >= min && factValue <= max;
});
customEngine.addOperator(betweenOperator);

const App: React.FC = () => (
  <RuleEditor
    value={JSON.stringify(rules)}
    onChange={console.log}
    facts={facts}
    operators={[
      ...operators,
      { value: 'between', label: 'Between' }
    ]}
    events={events}
    engine={customEngine}
  />
);

Customization

You can customize the styles by passing a styles object to the RuleEditor component. The default styles can be imported and extended:

import { RuleEditor, defaultStyles } from 'react-rules';

const customStyles = {
  ...defaultStyles,
  container: {
    ...defaultStyles.container,
    border: '1px solid blue',
    padding: '20px',
  },
};

<RuleEditor styles={customStyles} {...otherProps} />

Demo

To run the demo locally, clone the repository and run the following commands:

npm install
npm run dev

This will start a local development server. You can view the demo at http://localhost:3000.

CI/CD Pipeline

This project uses GitHub Actions for continuous integration and deployment:

• Pull Request Checks: Every PR runs automated tests to ensure code quality
• Automated Releases: Merging to main triggers automatic versioning and publishing
• Semantic Versioning: Version numbers are automatically determined based on commit messages