React Filter Chips

A flexible and customizable React component for filtering content using interactive chips. Perfect for creating filter interfaces in e-commerce, dashboards, and data visualization applications.

Demo

Basic Usage

Image Gallery Filtering

Features

• Flexible Filtering: Filter data by single or multiple criteria
• Customizable Styling: Full control over appearance with CSS classes and inline styles
• Search Functionality: Built-in search to find specific chips
• Responsive Design: Works seamlessly on desktop and mobile devices
• Accessibility: ARIA labels and keyboard navigation support
• Dark Mode: Automatic dark mode support
• Multi-select Support: Choose between single or multi-select filtering
• TypeScript: Full TypeScript support with comprehensive type definitions
• Well Tested: Comprehensive test coverage

Installation

npm install react-ui-chip-filter

yarn add react-ui-chip-filter

Framework Support

This package supports multiple React setups:

• TypeScript (TSX) - Full TypeScript support with comprehensive type definitions
• JavaScript (JSX) - Works with plain JavaScript and JSX
• Create React App - Compatible with CRA projects
• Next.js - Works with Next.js applications
• Vite - Compatible with Vite-based projects
• Webpack - Works with custom Webpack configurations
• ES Modules - Supports both CommonJS and ES module imports

Import Methods

TypeScript/TSX

import { FilterChips, FilterChip } from 'react-ui-chip-filter';
import 'react-ui-chip-filter/styles';

JavaScript/JSX

import { FilterChips } from 'react-ui-chip-filter';
import 'react-ui-chip-filter/styles';

CommonJS (Node.js)

const { FilterChips } = require('react-ui-chip-filter');
require('react-ui-chip-filter/dist/index.css');

ES Modules (Browser)

import { FilterChips } from 'react-ui-chip-filter/dist/index.esm.js';
import 'react-ui-chip-filter/dist/index.css';

Basic Usage

import React, { useState } from 'react';
import { FilterChips, FilterChip } from 'react-ui-chip-filter';

const data = [
  { id: 1, name: 'John Doe', category: 'Developer', skills: ['React', 'TypeScript'] },
  { id: 2, name: 'Jane Smith', category: 'Designer', skills: ['Figma', 'Sketch'] },
  { id: 3, name: 'Bob Johnson', category: 'Developer', skills: ['Vue', 'JavaScript'] },
];

const chips: FilterChip[] = [
  { id: 'dev', label: 'Developers', value: 'Developer' },
  { id: 'design', label: 'Designers', value: 'Designer' },
  { id: 'react', label: 'React', value: 'React' },
];

function App() {
  const [filteredData, setFilteredData] = useState(data);

  const handleChipClick = (chip: FilterChip, filtered: any[]) => {
    setFilteredData(filtered);
  };

  return (
    <div>
      <FilterChips
        chips={chips}
        onChipClick={handleChipClick}
        data={data}
        filterKey="category"
        multiSelect={true}
      />
      
      <div>
        {filteredData.map(item => (
          <div key={item.id}>{item.name}</div>
        ))}
      </div>
    </div>
  );
}

Props

FilterChipsProps

| Prop | Type | Default | Description | |------|------|---------|-------------| | chips | FilterChip[] | Required | Array of chip objects to display | | onChipClick | (chip: FilterChip, filteredData: any[]) => void | Required | Callback fired when a chip is clicked | | data | any[] | Required | Array of data to filter | | filterKey | string \| string[] | Required | Key(s) to filter by in the data objects | | multiSelect | boolean | false | Allow multiple chips to be selected | | className | string | '' | CSS class for the container | | chipClassName | string | '' | CSS class for individual chips | | activeChipClassName | string | '' | CSS class for active chips | | disabledChipClassName | string | '' | CSS class for disabled chips | | style | React.CSSProperties | undefined | Inline styles for the container | | chipStyle | React.CSSProperties | undefined | Inline styles for individual chips | | showClearAll | boolean | true | Show clear all button | | clearAllText | string | 'Clear All' | Text for clear all button | | clearAllClassName | string | '' | CSS class for clear all button | | maxChips | number | undefined | Maximum number of chips to show initially | | showMoreText | string | 'Show More' | Text for show more button | | showLessText | string | 'Show Less' | Text for show less button | | searchable | boolean | false | Enable search functionality | | searchPlaceholder | string | 'Search chips...' | Placeholder for search input | | searchClassName | string | '' | CSS class for search input | | noResultsText | string | 'No chips found' | Text when no chips match search | | loading | boolean | false | Show loading state | | loadingText | string | 'Loading...' | Text for loading state |

FilterChip

| Property | Type | Default | Description | |----------|------|---------|-------------| | id | string | Required | Unique identifier for the chip | | label | string | Required | Display text for the chip | | value | any | Required | Value to filter by | | active | boolean | false | Whether the chip is initially active | | disabled | boolean | false | Whether the chip is disabled | | color | string | undefined | Text color for the chip | | backgroundColor | string | undefined | Background color for the chip | | borderColor | string | undefined | Border color for the chip |

Advanced Examples

E-commerce Product Filtering

const products = [
  { 
    id: 1, 
    name: 'Wireless Headphones', 
    category: 'Electronics', 
    brand: 'TechSound',
    price: 99.99,
    tags: ['wireless', 'bluetooth']
  },
  // ... more products
];

const categoryChips: FilterChip[] = [
  { id: 'electronics', label: 'Electronics', value: 'Electronics' },
  { id: 'accessories', label: 'Accessories', value: 'Accessories' },
];

const brandChips: FilterChip[] = [
  { id: 'techsound', label: 'TechSound', value: 'TechSound' },
  { id: 'gamepro', label: 'GamePro', value: 'GamePro' },
];

function ProductFilters() {
  const [filteredProducts, setFilteredProducts] = useState(products);

  return (
    <div>
      <h3>Filter by Category</h3>
      <FilterChips
        chips={categoryChips}
        onChipClick={(chip, filtered) => setFilteredProducts(filtered)}
        data={products}
        filterKey="category"
        multiSelect={true}
      />
      
      <h3>Filter by Brand</h3>
      <FilterChips
        chips={brandChips}
        onChipClick={(chip, filtered) => setFilteredProducts(filtered)}
        data={products}
        filterKey="brand"
        multiSelect={true}
        maxChips={3}
        searchable={true}
      />
    </div>
  );
}

Custom Styling

const customChips: FilterChip[] = [
  { 
    id: 'high', 
    label: 'High Priority', 
    value: 'high',
    backgroundColor: '#ff6b6b',
    color: '#ffffff'
  },
  { 
    id: 'medium', 
    label: 'Medium Priority', 
    value: 'medium',
    backgroundColor: '#ffa726',
    color: '#ffffff'
  },
];

<FilterChips
  chips={customChips}
  onChipClick={handleChipClick}
  data={data}
  filterKey="priority"
  className="custom-priority-chips"
  chipClassName="custom-chip"
  activeChipClassName="custom-active"
/>

Array Field Filtering

const data = [
  { id: 1, name: 'John', skills: ['React', 'TypeScript', 'Node.js'] },
  { id: 2, name: 'Jane', skills: ['Vue', 'JavaScript'] },
  { id: 3, name: 'Bob', skills: ['React', 'Python'] },
];

const skillChips: FilterChip[] = [
  { id: 'react', label: 'React', value: 'React' },
  { id: 'vue', label: 'Vue', value: 'Vue' },
  { id: 'typescript', label: 'TypeScript', value: 'TypeScript' },
];

<FilterChips
  chips={skillChips}
  onChipClick={handleChipClick}
  data={data}
  filterKey="skills" // This will filter arrays
  multiSelect={true}
/>

Multiple Filter Keys

<FilterChips
  chips={chips}
  onChipClick={handleChipClick}
  data={data}
  filterKey={['category', 'department']} // Filter by multiple keys
  multiSelect={true}
/>

CSS Customization

The component comes with default styles, but you can easily customize them:

/* Custom container styles */
.custom-filter-container {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
}

/* Custom chip styles */
.custom-chip {
  border-radius: 25px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Custom active chip styles */
.custom-active-chip {
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* Custom search input styles */
.custom-search-input {
  border: 2px solid #007bff;
  border-radius: 8px;
}

Accessibility

The component includes built-in accessibility features:

• ARIA labels for screen readers
• Keyboard navigation support
• Focus management
• High contrast mode support
• Reduced motion support

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT License - see the LICENSE file for details.

Repository

• GitHub: https://github.com/divindvm/react-filter-chips
• NPM: https://www.npmjs.com/package/react-ui-chip-filter

Changelog

Framework-Specific Examples

Create React App (JSX)

// App.js
import React, { useState } from 'react';
import { FilterChips } from 'react-ui-chip-filter';
import 'react-ui-chip-filter/styles';

function App() {
  const [data, setData] = useState([
    { id: 1, name: 'Product 1', category: 'Electronics' },
    { id: 2, name: 'Product 2', category: 'Clothing' },
  ]);

  const chips = [
    { id: 'electronics', label: 'Electronics', value: 'Electronics' },
    { id: 'clothing', label: 'Clothing', value: 'Clothing' },
  ];

  return (
    <FilterChips
      chips={chips}
      onChipClick={(chip, filtered) => setData(filtered)}
      data={data}
      filterKey="category"
    />
  );
}

Next.js (TSX)

// pages/index.tsx
import { useState } from 'react';
import { FilterChips, FilterChip } from 'react-ui-chip-filter';
import 'react-ui-chip-filter/styles';

export default function HomePage() {
  const [data, setData] = useState([
    { id: 1, name: 'Product 1', category: 'Electronics' },
  ]);

  const chips: FilterChip[] = [
    { id: 'electronics', label: 'Electronics', value: 'Electronics' },
  ];

  return (
    <FilterChips
      chips={chips}
      onChipClick={(chip, filtered) => setData(filtered)}
      data={data}
      filterKey="category"
    />
  );
}

Vite (TSX)

// src/App.tsx
import { useState } from 'react';
import { FilterChips, FilterChip } from 'react-ui-chip-filter';
import 'react-ui-chip-filter/styles';

function App() {
  const [data, setData] = useState([
    { id: 1, name: 'Product 1', category: 'Electronics' },
  ]);

  const chips: FilterChip[] = [
    { id: 'electronics', label: 'Electronics', value: 'Electronics' },
  ];

  return (
    <FilterChips
      chips={chips}
      onChipClick={(chip, filtered) => setData(filtered)}
      data={data}
      filterKey="category"
    />
  );
}

Changelog

1.0.0

• Initial release
• Basic filtering functionality
• Custom styling support
• Search functionality
• Multi-select support
• TypeScript definitions
• Comprehensive test coverage
• Support for both JSX and TSX applications
• Multiple import methods (ES modules, CommonJS)
• Framework compatibility (CRA, Next.js, Vite, Webpack)