React Simple Select

A lightweight, customizable, and accessible React select component with support for multi-select, async options, and keyboard navigation.

Features

- ✅ Supports both single and multi-select
- ✅ Async options support (fetch data dynamically)
- ✅ Keyboard navigation (Arrow keys, Enter, Escape)
- ✅ Custom icons for options
- ✅ Fully customizable styles (default SCSS provided)
- ✅ Click outside to close

Installation

``sh
yarn add @nixxy/react-simple-select
`

or

`sh
npm install @nixxy/react-simple-select
`

Usage

`tsx
import SimpleSelect, { Option } from '@nixxy/react-simple-select';
import '@nixxy/react-simple-select/dist/style.css';

const options: Option[] = [
{ label: 'Apple', value: 'apple' },
{ label: 'Banana', value: 'banana' },
{ label: 'Cherry', value: 'cherry' },
];

export default function Example() {
return (
console.log(value)} />
);
}
`

$3

`tsx
options={options}
multiple
onChange={(values) => console.log(values)}
/>
`

$3

`tsx
const fetchOptions = async () => {
return new Promise((resolve) =>
setTimeout(() => {
resolve([
{ label: 'React', value: 'react' },
{ label: 'Vue', value: 'vue' },
]);
}, 10000)
);
};

;
`

Props

| Prop | Type | Default | Description |
| ------------- | ---------------------------------------- | ------------- | ------------------------------------------- |
| options | Option[] or () => Promise | [] | The list of options (static or async) |
| multiple | boolean | false | Enables multi-select mode |
| onChange | (selected: Option or Option[]) => void | undefined | Callback triggered when selection changes |
| placeholder | string | "Select..." | Placeholder text when no option is selected |
| className | string | "" | Additional class names for styling |

Keyboard Navigation

- Arrow Down: Move to the next option
- Arrow Up: Move to the previous option
- Enter: Select the focused option
- Escape: Close the dropdown

Custom Styling

You can customize the component using the className prop:

`tsx
import { FiCoffee } from 'react-icons/fi';

className="custom-select"
options={[{ value: 'coffee', label: 'Coffee', Icon: }]}
/>;
`

$3

If you want full control over the styles, you can skip importing the default CSS and write your own:

`css
/ Base styles /
.nx-simple-select {
/ Custom styles /
}

.nx-simple-select .options {
/ Custom dropdown styles /
}

/ Hide dropdown icon /
.nx-simple-select .select-icon {
display: none;
}

/ Add a background image to .nx-simple-select /
.nx-simple-select {
background-image: url('your-image.png');
}
``

The default styles are primarily for testing, so you’re free to customize them however you like.

---

License

MIT

Contributing

Feedback and contributions are welcome! Open an issue or submit a PR.