ReactFilterChips

Overview

The ReactFilterChips component provides an interactive way to display and manage filter chips in your React application. It allows users to see the applied filters and remove them individually or clear all filters at once. This component is highly customizable and supports various data types including strings, numbers, arrays, objects, booleans, and dates.

Live Demo

To test React Filter Chips on CodeSandbox, click here.

Installation

To install the ReactFilterChips component, you can use npm:

npm install react-filter-chips

Or using yarn

yarn add react-filter-chips

Simple Usage

import React, { useState, useEffect } from "react";
import ReactFilterChips from "react-filter-chips";

function App() {
  const EMPTY_FILTER = {
    string: "",
    number: null,
    array: [],
    Object: null,
    boolean: false,
    date: null,
  };

  const [filterState, setFilterState] = useState(EMPTY_FILTER);
  const [filterStateTem, setFilterStateTem] = useState(EMPTY_FILTER);

  const onDeleteChip = (data) => {
    console.log("Updated state:", data);
    setFilterState(data);
    setFilterStateTem(data);
  };

  const onClear = () => {
    setFilterState(EMPTY_FILTER);
    setFilterStateTem(EMPTY_FILTER);
  };

  useEffect(() => {
    const initialData = {
      string: "example string",
      number: 12345,
      array: [
        { chip_value: "array-data-1", chip_label: "Array 1" },
        { chip_value: "array-data-2", chip_label: "Array 2" },
      ],
      Object: {
        chip_value: "object-data-1",
        chip_label: "Object 1",
      },
      boolean: true,
      date: new Date(),
    };
    setFilterState(initialData);
    setFilterStateTem(initialData);
  }, []);

  return (
    <div className="App">
      <ReactFilterChips
        filterData={filterState}
        tempState={filterStateTem}
        emptyFilter={EMPTY_FILTER}
        clearLabel="Clear All"
        filterLabel="Filter By"
        onDeleteChip={onDeleteChip}
        onClear={onClear}
      />
    </div>
  );
}

export default App;

Props

| Prop | Type | Description | Default | | ------------------ | ----------- | --------------------------------------------------------------------------------------------------------------------------------------- | ------- | | filterData | Object | The main filter data that is displayed as chips. This should be an object with various key-value pairs representing the filters. | | | tempState | Object | A temporary state object to keep track of the current state of filters. | | | emptyFilter | Object | An object representing the empty state of filters. Used to reset the filters. | | | alterFilter | Object | (Optional) An object representing the altered state of filters. This can be used to change the state of filters when a chip is removed. | | | removeItems | Array | (Optional) An array of keys that should be excluded from being displayed as chips. | | | onDeleteChip | Function | A callback function that is called when a chip is deleted. It receives the updated filter state as an argument. | | | onClear | Function | A callback function that is called when the "Clear All" button is clicked. It resets the filter state. | | | clearLabel | String | (Optional) The label for the "Clear All" button. Defaults to an empty string. | "" | | filterLabel | String | (Optional) The label that appears before the filter chips. Defaults to an empty string. | "" | | chipstyle | Object | (Optional) A style object to customize the appearance of the chips. | | | iconStyle | Object | (Optional) A style object to customize the appearance of the close icon on the chips. | | | isShowCloseStart | Boolean | (Optional) A boolean to determine if the close icon should be shown at the start of the chip. Defaults to false. | false | | isShowClose | Boolean | (Optional) A boolean to determine if the close icon should be shown on the chips. Defaults to true. | true | | customIcon | ReactNode | (Optional) A custom icon to replace the default close icon. | |

Meta Dev Zone – @meta-dev-zone