https://github.com/justnixx/react-simple-select
A simple, customizable, accessible select dropdown for React.
https://github.com/justnixx/react-simple-select
accessible custom-select dropdown react select ui-component
Last synced: over 1 year ago
JSON representation
A simple, customizable, accessible select dropdown for React.
- Host: GitHub
- URL: https://github.com/justnixx/react-simple-select
- Owner: justnixx
- License: mit
- Created: 2025-03-24T17:12:52.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-24T20:10:36.000Z (over 1 year ago)
- Last Synced: 2025-03-24T21:21:56.318Z (over 1 year ago)
- Topics: accessible, custom-select, dropdown, react, select, ui-component
- Language: TypeScript
- Homepage:
- Size: 70.3 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# 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)} />
);
}
```
### Multi-Select Example
```tsx
console.log(values)}
/>
```
### Async Options Example
```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';
}]}
/>;
```
### **Overriding Styles**
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.