react-filter-builder-input

Filter builder input component inspired by Gitlab

Usage no npm install needed!

<script type="module">
  import reactFilterBuilderInput from 'https://cdn.skypack.dev/react-filter-builder-input';
</script>

README

Welcome to react-filter-builder-input 👋

Version License: MIT

Filter Builder Input component inspired by Gitlab

Let your users build complex filters fast and easly!

🏠 Homepage

✨ Demo

✨✨ Advanced Usage Demo

Install

npm i react-filter-builder-input

Usage

const SimpleFilterWithOptions = () => {
  const [filter, setFilter] = useState();
  const [fieldSelected, setFieldSelected] = useState<string | undefined>();

  const valuesByField = {
    phone: ["201-241-2412", "087-211-2412", "201-111-4362", "214-241-4166"],
    address: ["bannana 24", "shishim 10", "some address", "olive 214"],
    hight: ["241", "12", "3.21", "251"],
  };

  function changeFieldSelected(inputValue, field, relation, value) {
    setFieldSelected(field);
  }

  return (
    <FilterBuilderInput
      filter={filter}
      onChange={setFilter}
      fieldOptions={["phone", "address", "hight", "capacity", "order number"]}
      valueOptions={valuesByField[fieldSelected] || []}
      onOptionsContextChange={changeFieldSelected}
    />
  );
};

Example Result

Resolved filter state

{
  "type": "LogicalRelation",
  "relation": "Or",
  "elements": [
    {
      "type": "FieldMatcher",
      "value": "087-211-2412",
      "field": "phone",
      "relation": "!="
    },
    {
      "type": "FieldMatcher",
      "value": "32",
      "field": "phone",
      "relation": "Contains"
    },
    {
      "type": "LogicalRelation",
      "relation": "And",
      "elements": [
        {
          "type": "FieldMatcher",
          "value": "30",
          "field": "capacity",
          "relation": ">"
        },
        {
          "type": "FieldMatcher",
          "value": "54",
          "field": "capacity",
          "relation": "<"
        },
        {
          "type": "LogicalRelation",
          "relation": "And",
          "elements": [
            {
              "type": "FieldMatcher",
              "value": "10",
              "field": "hight",
              "relation": "<"
            },
            {
              "type": "FieldMatcher",
              "value": "30",
              "field": "hight",
              "relation": ">"
            }
          ]
        }
      ]
    }
  ]
}

Props

Property Type Default Value Description Notes
filter LogicalRelation This component is controlled. Therefore the component will display only the values passed to filter. Safe to pass undefined. Will invoke onChange with empty filter.
onChange (LogicalRelation) => any This component is controlled. Therefore any change in value will invoke onChange. The change only takes place if filter is updated. Must provide onChange.
fieldOptions? string[] The options that will pop when the field input is focused. See auto complete example in advanced usage demo
isLoadingFieldOptions? boolean If true the loading indicator will show and no field options will appear.
valueOptions? string[] The options that will pop when the value input is focused. See auto complete example in advanced usage demo
isLoadingValueOptions? boolean If true the loading indicator will show and not value options will appear.
onOptionsContextChange? OnOptionsContextChange A function used to listen for the context of the currently focused input. inputValue is the currently incomplete value in the input. field is the currently selected field (phone, address, ...). relation is the currently selected relation (>, !=, =, ...). value is the currently selected value (104-212-0421, 054-214-5211, ...) This function should only be used to update a state. And cannot use any other variable. Only the first function passed when the FilterBuilderInput mounts, will be used! onOptionsContextChange cannot be changed after FilterBuilderInput is mounted!
loadingIndicator? React.ReactNode or null or undefined styled div with the text: "Loading..." Render here the indicator you want to appear inside the pop over when loading.
colorPalette? string[] ["rgba(0,0,0,0.1)", "#64b5f6", "#7986cb", "#9575cd", "#4db6ac", "#4dd0e1"] colorPalette to use when a new depth is created. The first color is given to the first (most outer) logical relation. The second to the second, etc...
LabelComponent? LabelComponentType ChipLabel This component can be used to override the default chip component See advanced usage demo for more details
relationOptions? string[] ["=", "!=", ">", ">=", "<", "<=", "Contains", "No Contains", "Like"] Can be used to specify the relatons available. There is already auto complete on the relation dropdown (no need to implement it). This options doesn't support loading.
inputStyle? React.CSSProperties Can be used to override style of input line. Recommended for changing font related styles. The style will apply to both the input and the options list text containers.

Author

👤 Ofek Ben-Yaish

🤝 Contributing

Contributions, issues and feature requests are welcome!
Feel free to check issues page.

Show your support

Give a ⭐️ if this project helped you!

Thanks

This README was generated with ❤️ by readme-md-generator