React Select Search Plus

A flexible and customizable select component with search functionality for React applications.

Features

• 🔍 Search functionality with customizable filtering
• ✨ Single and multiple selection modes
• 🎨 Fully customizable styling
• 🔄 Async data loading support
• 🎯 TypeScript support
• ⌨️ Keyboard navigation
• 🎭 Custom option rendering
• 📱 Mobile-friendly

Installation

npm install react-select-search-plus
# or
yarn add react-select-search-plus

Basic Usage

import { SelectSearch } from 'react-select-search-plus';

const options = [
  { id: 1, label: 'Option 1', value: 'value1' },
  { id: 2, label: 'Option 2', value: 'value2' },
  { id: 3, label: 'Option 3', value: 'value3' },
];

function MyComponent() {
  const handleChange = (selected) => {
    console.log('Selected options:', selected);
  };

  return (
    <SelectSearch
      options={options}
      onChange={handleChange}
      multiple
      searchPlaceholder="Search options..."
    />
  );
}

Advanced Usage

Async Data Loading

if you are using typescript do not use any clear your response interface

function AsyncExample() {
  const fetchOptions = async () => {
    const response = await fetch('https://api.example.com/options');
    const data = await response.json();
    return data.map(item => ({
      id: item.id,
      label: item.name,
      value: item
    }));
  };

  return (
    <SelectSearch
      fetchOptions={fetchOptions}
      loading={true}
      loadingMessage="Fetching options..."
    />
  );
}

Custom Filtering

function CustomFilterExample() {
  const customFilter = (option, searchTerm) => {
    // Custom filtering logic
    return option.label.toLowerCase().startsWith(searchTerm.toLowerCase());
  };

  return (
    <SelectSearch
      options={options}
      customFilter={customFilter}
    />
  );
}

Props

Prop	Type	Default	Description
options	Option[]	[]	Array of options to display
value	Option[]	[]	Currently selected options
onChange	(selected: Option[]) => void	-	Callback when selection changes
onSearch	(searchTerm: string) => void	-	Callback when search input changes
multiple	boolean	false	Enable multiple selection
disabled	boolean	false	Disable the component
loading	boolean	false	Show loading state
searchPlaceholder	string	"Type to search..."	Placeholder text for search input
noOptionsMessage	string	"No options found"	Message when no options match search
loadingMessage	string	"Loading..."	Message during loading state
className	string	""	Additional CSS class for container
optionClassName	string	""	Additional CSS class for options
selectedClassName	string	""	Additional CSS class for selected options
fetchOptions	() => Promise<Option[]>	-	Async function to fetch options
customFilter	(option: Option, searchTerm: string) => boolean	-	Custom filter function
maxSelected	number	-	Maximum number of selections allowed

Styling

The component comes with basic styling that you can extend or override using CSS classes. Each element has a specific class name that you can target:

  .this .component is styled with .taildwindcss you can style with any css class 

TypeScript Usage

The component is fully typed and supports generic types for option values:

interface User {
  id: number;
  name: string;
  email: string;
}

function UserSelect() {
  return (
    <SelectSearch<User>
      options={[
        {
          id: 1,
          label: 'John Doe',
          value: { id: 1, name: 'John Doe', email: '[e-mail]' }
        }
      ]}
      onChange={(selected) => {
        // selected[0].value will be typed as User
        console.log(selected[0].value.email);
      }}
    />
  );
}

Contributing

Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change. i remain Anthony JR👌🤣❤️

License

ISC License - see the LICENSE file for details.