@aniruddha1806/selector-chips

React Selector Chips

A flexible, customizable chip selector component for React applications with TypeScript support. Perfect for filters, tags, multi-select options, and more.

Installation

npm install @aniruddha1806/selector-chips

Features

• 🎯 Simple multi-selection interface with toggle functionality
• 🎨 Extensive styling customization (inline styles + classNames)
• 📱 Responsive layouts (horizontal, vertical, grid)
• 🔍 Support for icons and tooltips
• 🔢 Maximum selection limit option
• 📜 Scrollable container for large option sets
• ♿ Accessibility features with ARIA attributes
• 🎯 TypeScript support with full type definitions
• 🪶 Zero dependencies and lightweight

Quick Start

import SelectorChips from '@aniruddha1806/selector-chips';

function App() {
  const options = [
    { id: 1, label: 'React' },
    { id: 2, label: 'Vue' },
    { id: 3, label: 'Angular' },
    { id: 4, label: 'Svelte' },
    { id: 5, label: 'Next.js' }
  ];

  const handleChange = (selectedIds) => {
    console.log('Selected:', selectedIds);
  };

  return (
    <div style={{ padding: '20px' }}>
      <h3>Select Frameworks:</h3>
      <SelectorChips
        options={options}
        defaultSelected={[1, 5]}
        onChange={handleChange}
      />
    </div>
  );
}

Props

Prop	Type	Default	Description
options	ChipOption[]	required	Array of chip options
defaultSelected	(string | number)[]	[]	Initially selected chip IDs
onChange	(selectedIds: (string | number)[]) => void	undefined	Selection change callback
className	string	undefined	CSS class for container
chipClassName	string	undefined	CSS class for all chips
selectedChipClassName	string	undefined	CSS class for selected chips
disabledChipClassName	string	undefined	CSS class for disabled chips
maxSelections	number	undefined	Maximum number of selectable chips
iconPosition	"left" | "right"	"left"	Position of icons in chips
showTooltips	boolean	false	Enable tooltips on hover
tooltipDelay	number	300	Delay before showing tooltip (ms)
scrollable	boolean	false	Make container scrollable
maxHeight	number | string	200	Max height for scrollable container
layout	"horizontal" | "vertical" | "grid"	"horizontal"	Layout arrangement of chips

ChipOption Type

type ChipOption = {
  id: string | number;
  label: string;
  disabled?: boolean;
  icon?: ReactNode;
  tooltip?: string;
}

Examples

Basic Usage

Simple chip selector with default styling:

import SelectorChips from '@aniruddha1806/selector-chips';

function BasicExample() {
  const categories = [
    { id: 'electronics', label: 'Electronics' },
    { id: 'clothing', label: 'Clothing' },
    { id: 'books', label: 'Books' },
    { id: 'home', label: 'Home & Kitchen' },
    { id: 'toys', label: 'Toys' }
  ];

  return (
    <div>
      <h3>Filter by Category:</h3>
      <SelectorChips
        options={categories}
        onChange={(selected) => console.log('Selected categories:', selected)}
      />
    </div>
  );
}

With Icons

Add icons to your chips:

import SelectorChips from '@aniruddha1806/selector-chips';
import { FaReact, FaVuejs, FaAngular, FaJs, FaHtml5 } from 'react-icons/fa';

function IconChipsExample() {
  const technologies = [
    { id: 'react', label: 'React', icon: <FaReact /> },
    { id: 'vue', label: 'Vue', icon: <FaVuejs /> },
    { id: 'angular', label: 'Angular', icon: <FaAngular /> },
    { id: 'javascript', label: 'JavaScript', icon: <FaJs /> },
    { id: 'html', label: 'HTML', icon: <FaHtml5 /> }
  ];

  return (
    <div>
      <h3>Select Technologies:</h3>
      <SelectorChips
        options={technologies}
        iconPosition="left"
        onChange={(selected) => console.log('Selected:', selected)}
      />
    </div>
  );
}

With Tooltips

Add helpful tooltips to chips:

import SelectorChips from '@aniruddha1806/selector-chips';

function TooltipChipsExample() {
  const plans = [
    { 
      id: 'basic', 
      label: 'Basic', 
      tooltip: '$10/month - 10GB storage' 
    },
    { 
      id: 'pro', 
      label: 'Pro', 
      tooltip: '$20/month - 50GB storage + priority support' 
    },
    { 
      id: 'enterprise', 
      label: 'Enterprise', 
      tooltip: '$50/month - Unlimited storage + 24/7 support' 
    }
  ];

  return (
    <div>
      <h3>Select Plan:</h3>
      <SelectorChips
        options={plans}
        showTooltips={true}
        tooltipDelay={500}
        onChange={(selected) => console.log('Selected plan:', selected)}
      />
    </div>
  );
}

Grid Layout

Display chips in a responsive grid:

import SelectorChips from '@aniruddha1806/selector-chips';

function GridChipsExample() {
  const colors = [
    { id: 'red', label: 'Red' },
    { id: 'blue', label: 'Blue' },
    { id: 'green', label: 'Green' },
    { id: 'yellow', label: 'Yellow' },
    { id: 'purple', label: 'Purple' },
    { id: 'orange', label: 'Orange' },
    { id: 'pink', label: 'Pink' },
    { id: 'black', label: 'Black' },
    { id: 'white', label: 'White' }
  ];

  return (
    <div>
      <h3>Select Colors:</h3>
      <SelectorChips
        options={colors}
        layout="grid"
        onChange={(selected) => console.log('Selected colors:', selected)}
      />
    </div>
  );
}

With Maximum Selections

Limit the number of selectable chips:

import SelectorChips from '@aniruddha1806/selector-chips';

function LimitedSelectionExample() {
  const toppings = [
    { id: 'cheese', label: 'Extra Cheese' },
    { id: 'pepperoni', label: 'Pepperoni' },
    { id: 'mushrooms', label: 'Mushrooms' },
    { id: 'onions', label: 'Onions' },
    { id: 'peppers', label: 'Bell Peppers' },
    { id: 'olives', label: 'Olives' },
    { id: 'bacon', label: 'Bacon' }
  ];

  return (
    <div>
      <h3>Select up to 3 Pizza Toppings:</h3>
      <SelectorChips
        options={toppings}
        maxSelections={3}
        onChange={(selected) => console.log('Selected toppings:', selected)}
      />
    </div>
  );
}

Scrollable Container

Handle large sets of options with scrolling:

import SelectorChips from '@aniruddha1806/selector-chips';

function ScrollableChipsExample() {
  // Generate 20 options for demonstration
  const manyOptions = Array.from({ length: 20 }, (_, i) => ({
    id: i + 1,
    label: `Option ${i + 1}`
  }));

  return (
    <div>
      <h3>Select Options:</h3>
      <SelectorChips
        options={manyOptions}
        scrollable={true}
        maxHeight={150}
        layout="vertical"
        onChange={(selected) => console.log('Selected:', selected)}
      />
    </div>
  );
}

Custom Styling

Apply custom styles with className props:

import SelectorChips from '@aniruddha1806/selector-chips';
import './custom-chips.css'; // Your custom CSS file

function CustomStyledChipsExample() {
  const sizes = [
    { id: 'xs', label: 'XS' },
    { id: 's', label: 'S' },
    { id: 'm', label: 'M' },
    { id: 'l', label: 'L' },
    { id: 'xl', label: 'XL' }
  ];

  return (
    <div>
      <h3>Select Size:</h3>
      <SelectorChips
        options={sizes}
        className="size-selector"
        chipClassName="size-chip"
        selectedChipClassName="size-chip-selected"
        disabledChipClassName="size-chip-disabled"
        onChange={(selected) => console.log('Selected size:', selected)}
      />
    </div>
  );
}

CSS file (custom-chips.css):

.size-selector {
  display: flex;
  gap: 8px;
  margin: 16px 0;
}

.size-chip {
  padding: 8px 16px;
  border-radius: 4px;
  background-color: #f0f0f0;
  color: #333;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
}

.size-chip:hover {
  background-color: #e0e0e0;
}

.size-chip-selected {
  background-color: #4a90e2;
  color: white;
}

.size-chip-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  text-decoration: line-through;
}

Disabled Options

Include disabled options that can't be selected:

import SelectorChips from '@aniruddha1806/selector-chips';

function DisabledChipsExample() {
  const subscriptionFeatures = [
    { id: 'basic', label: 'Basic Features', disabled: false },
    { id: 'advanced', label: 'Advanced Features', disabled: false },
    { id: 'premium', label: 'Premium Features', disabled: true },
    { id: 'enterprise', label: 'Enterprise Features', disabled: true }
  ];

  return (
    <div>
      <h3>Available Features:</h3>
      <p>Upgrade to unlock premium features</p>
      <SelectorChips
        options={subscriptionFeatures}
        onChange={(selected) => console.log('Selected features:', selected)}
      />
    </div>
  );
}

import SelectorChips, { ChipOption, SelectorChipsProps } from '@aniruddha1806/selector-chips';
import { useState } from 'react';

interface FilterOption {
  id: string;
  name: string;
  count: number;
}

const FilterComponent: React.FC = () => {
  const [selectedFilters, setSelectedFilters] = useState<string[]>([]);
  
  // Your data from API or elsewhere
  const filterData: FilterOption[] = [
    { id: 'filter1', name: 'Popular', count: 120 },
    { id: 'filter2', name: 'New', count: 42 },
    { id: 'filter3', name: 'Sale', count: 38 }
  ];
  
  // Transform your data to match ChipOption type
  const chipOptions: ChipOption[] = filterData.map(filter => ({
    id: filter.id,
    label: `${filter.name} (${filter.count})`,
    tooltip: `${filter.count} items available`
  }));
  
  // Define props with proper types
  const selectorProps: SelectorChipsProps = {
    options: chipOptions,
    defaultSelected: [],
    onChange: (ids) => setSelectedFilters(ids as string[]),
    showTooltips: true,
    layout: 'horizontal'
  };
  
  return (
    <div>
      <h3>Filter Products:</h3>
      <SelectorChips {...selectorProps} />
    </div>
  );
};

Styling

The component supports both inline styles and CSS classes for maximum flexibility: