A customizable multi-select dropdown component for React with theme support
npm install custom-multiselect-reactbash
npm install custom-multiselect-react
`Basic Usage
jsx
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 (
value={selected}
onChange={setSelected}
placeholder="Select fruits..."
/>
);
}
`With Color Presets
jsx
value={selected}
onChange={setSelected}
colorPreset="green" // blue, green, purple, red, orange, teal, pink, indigo
/>
`Single Select
jsx
value={selectedValue}
onChange={setSelectedValue}
isMulti={false}
colorPreset="blue"
/>
`Custom Colors
jsx
value={selected}
onChange={setSelected}
customTheme={{
chipBackground: '#ff6b6b',
highlightColor: '#4ecdc4',
borderColor: '#e0e0e0',
chipTextColor: '#ffffff'
}}
/>
`Height & Size Customization
jsx
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
jsx
// 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'
}}
/>``