custom-multiselect-react

Installation & Usage

Install

npm install custom-multiselect-react

Basic Usage

import React, { useState } from 'react';
import CustomMultiSelect from 'custom-multiselect-react';

function App() {
  const [selected, setSelected] = useState([]);
  
  const options = [
    { label: "Apple", value: "apple" },
    { label: "Banana", value: "banana" },
    { label: "Orange", value: "orange" }
  ];

  return (
    <CustomMultiSelect
      options={options}
      value={selected}
      onChange={setSelected}
      placeholder="Select fruits..."
    />
  );
}

With Color Presets

<CustomMultiSelect
  options={options}
  value={selected}
  onChange={setSelected}
  colorPreset="green"  // blue, green, purple, red, orange, teal, pink, indigo
/>

Single Select

<CustomMultiSelect
  options={options}
  value={selectedValue}
  onChange={setSelectedValue}
  isMulti={false}
  colorPreset="blue"
/>

Custom Colors

<CustomMultiSelect
  options={options}
  value={selected}
  onChange={setSelected}
  customTheme={{
    chipBackground: '#ff6b6b',
    highlightColor: '#4ecdc4',
    borderColor: '#e0e0e0',
    chipTextColor: '#ffffff'
  }}
/>

Height & Size Customization

<CustomMultiSelect
  options={options}
  value={selected}
  onChange={setSelected}
  customTheme={{
    // Height & Size
    minHeight: '50px',              // Component minimum height
    fontSize: '16px',               // Text size
    chipFontSize: '14px',           // Chip text size
    
    // Spacing
    padding: '12px 16px',           // Internal padding
    chipPadding: '6px 12px',        // Chip padding
    optionPadding: '16px 20px',     // Dropdown option padding
    gap: '8px',                     // Space between chips
    
    // Dropdown sizing
    maxDropdownHeight: '400px',     // Max dropdown height
    minDropdownWidth: '250px',      // Min dropdown width
    optionMinHeight: '40px',        // Min option height
  }}
/>

All Available Custom Colors & Sizes

<CustomMultiSelect
  customTheme={{
    // Chip colors
    chipBackground: '#your-color',
    chipTextColor: '#ffffff',
    
    // Highlight colors
    highlightColor: '#your-color',
    highlightSecondary: '#darker-shade',
    
    // Border colors
    borderColor: '#border-color',
    
    // Background colors
    backgroundColor: '#white',
    dropdownBackground: '#white',
    dropdownHoverBackground: '#light-gray',
    
    // Text colors
    textColor: '#dark-gray',
    placeholderColor: '#gray',
    
    // Height & Sizing
    minHeight: '40px',              // Component height
    fontSize: '14px',               // Main text size
    chipFontSize: '13px',           // Chip text size
    
    // Border radius
    borderRadius: '8px',            // Main border radius
    chipBorderRadius: '6px',        // Chip border radius
    dropdownBorderRadius: '8px',    // Dropdown border radius
    
    // Spacing
    padding: '8px 12px',            // Internal padding
    chipPadding: '4px 8px',         // Chip padding
    optionPadding: '12px 16px',     // Option padding
    gap: '6px',                     // Gap between elements
    
    // Dropdown sizing
    maxDropdownHeight: '300px',     // Max dropdown height
    minDropdownWidth: '200px',      // Min dropdown width
    optionMinHeight: '',            // Min option height
    
    // Scrollbar
    scrollbarWidth: '6px',
    scrollbarTrackColor: '#f3f4f6',
    scrollbarThumbColor: '#3b82f6'
  }}
/>```