mui-advanced-filter

A reusable React component for advanced filtering with Material-UI.

Installation

Install the package using npm:

npm install mui-advanced-filter
npm install react react-dom @mui/material @mui/x-date-pickers-pro @mui/icons-material @emotion/react @emotion/styled dayjs

Usage

The AdvancedFilter component already includes the LocalizationProvider internally, so you don't need to wrap it in your application. Here's how you can use it:

import React from "react";
import { AdvancedFilter } from "mui-advanced-filter";

const App = () => {
  const handleFilterChange = (filters) => {
    console.log("Applied Filters:", filters);
  };

  return (
    <div>
      <h1>Advanced Filter Example</h1>
      <AdvancedFilter onFilterChange={handleFilterChange} />
    </div>
  );
};

export default App;

Example Usage

Here’s an example of how to integrate the AdvancedFilter component into a larger application:

import React, { useState } from "react";
import { AdvancedFilter } from "mui-advanced-filter";

const ExampleApp = () => {
  const [filters, setFilters] = useState({});

  const handleFilterChange = (newFilters) => {
    setFilters(newFilters);
    console.log("Filters updated:", newFilters);
  };

  return (
    <div>
      <h1>Filter Dashboard</h1>
      <AdvancedFilter onFilterChange={handleFilterChange} />
      <div>
        <h2>Selected Filters:</h2>
        <pre>{JSON.stringify(filters, null, 2)}</pre>
      </div>
    </div>
  );
};

export default ExampleApp;

This example demonstrates how to capture and display the selected filters in your application.