Advanced Filter Component

🔥 Demo

Check out the live demo: View Demo

A reusable and customizable Advanced Filter Component for React, built with PrimeReact and styled with external CSS.

✨ Features

• Easy-to-use dropdown for filter match modes.
• Customizable styles.
• Works out of the box with PrimeReact icons and theming.

📦 Installation

First, install the package:

npm install react-advanced-filter

You also need to install peer dependencies if you haven't already:

npm install primereact primeicons react react-dom

🚀 Usage

1. Import the component and CSS:

import FilterComponent, { ClearFilter } from "react-advanced-filter";
import 'react-advanced-filter/react-advanced-filter.css';

2. Use it in your application:

import React, { useState } from 'react';
import FilterComponent, { ClearFilter } from "react-advanced-filter";
import 'react-advanced-filter/react-advanced-filter.css';

function App() {
    const myData = [
        { name: 'John Wick', city: 'New York' },
        { name: 'Alice Lamb', city: 'Los Angeles' },
        { name: 'Bob Walker', city: 'Chicago' },
    ];

    const filterRef = useRef(null);
    const [filtered, setFiltered] = useState(myData);

    return (
        <>
            <FilterComponent
                ref={filterRef}
                data={myData}
                keyField="name" // can also be city (Only considered when dataset is array of object)
                onFilter={(filteredData) => setFiltered(filteredData)}
            />
            <ClearFilter
                ref={filterRef}
            />
        </>
    );
}

export default App;

📋 Props

<FilterComponent />

| Prop | Type | Required | Description | |:-----------|:-----------------------------|:---------|:------------| | ref | React.RefObject | Yes | Ref object used to control the component externally (required for clearing filters). | | data | any[] | Yes | The dataset you want to filter. It can be an array of strings or array of objects. | | keyField | string | No | The object field to use for filtering (only needed if data is an array of objects). | | onFilter | (filteredData: any[]) => void| Yes | Callback function that returns the filtered data after applying the filter. |

<ClearFilter />

| Prop | Type | Required | Description | |:-------|:-------------------|:---------|:------------| | ref | React.RefObject | Yes | Ref object linked to the FilterComponent to clear/reset the filter externally. |

🎨 Styling

This component expects you to import its CSS manually:

import 'react-advanced-filter/react-advanced-filter.css';

🔗 Peer Dependencies

Make sure you have the following packages installed in your project:

1. react
2. react-dom
3. primereact
4. primeicons