React
Conditional Selection

React Conditional Selection is a useful way to build cascading dropdown with large amount of options, categories and business rules aimed at controlling the dependencies between of them.

How it works

Business rules are defined on almost every row of data. Each time when object of selection changes, there is starting validation process. Rule decide about when option or select should render. Validation relies on comparing rules with selection object. Categories, selects or options are rendered only when its rules are matching to current object of selection.

Basic example

{
    "selection": {},
    "stats": {
        "isReady": false
    }
}

Example with default selection

{
    "selection": {},
    "stats": {
        "isReady": false
    }
}

Rule Translator

Rules are writen in MongoDB syntax but if you are more familiar with SQL syntax you can use translator. Just type below:

Installation

Install NPM package

npm i react-conditional-selection

and then apply code like this

import ConditionalSelection from "react-conditional-selection";

function App() {
  const data = {
    FUELTYPE: {
      code: "FUELTYPE",
      name: "Fuel type",
      options: [
        {
          code: "NONE",
          name: "none",
          default: null,
          rules: { ENGINEVERSIONS: { $in: ["ELECTRIC", "HYDROGEN"] } },
        },
        {
          code: "PETROL",
          name: "Petrol",
          default: null,
          rules: { ENGINEVERSIONS: "GASOLINE" },
        },
        {
          code: "DIESEL",
          name: "Diesel",
          default: null,
          rules: { ENGINEVERSIONS: "GASOLINE" },
        },
      ],
      category: { name: "Technical Data", code: "TECHNICAL" },
      isVisible: true,
      isRequired: true,
      rules: null,
    },
  };
  return (
    <ConditionalSelection
      data={data}
      showRequired={true}
      callback={(data) => {
        console.log(data);
      }}
    />
  );
}

export default App;

License

MIT

Thanks to

To comparing this stuff I've been used great library written by Pieter Sheth-Voss.
To translate SQL to MongoDB syntax I've been used Mongo DQL plugin.
Also thanks to Jad Watson for great React Select.
And of course thaks to React Team for React.