ℵi✗✗

Posted on Mar 27

React Simple Select: A Lightweight and Customizable Select Component for React

#react #webdev #javascript #opensource

When working on my projects, I often found existing React select components either too bloated, lacking proper accessibility, or difficult to customize. So, I decided to build React Simple Select—a lightweight, accessible, and highly customizable select component for React. It supports multi-select, async options, and full keyboard navigation. 🚀

Why I Built This

I wanted a simple yet flexible select component that:

Is lightweight and doesn't come with unnecessary dependencies.
Supports multi-select without complex configurations.
Provides keyboard accessibility out of the box.
Can handle async options (e.g., fetching from an API).
Is customizable but also works with sensible defaults.

So I decided to create my own! Now, it's available for anyone to use and improve. 🎉

Features

✅ Single and multi-select support
✅ Async options support
✅ Full keyboard navigation (Arrow keys, Enter, Escape)
✅ Customizable styles and class names
✅ Icon support for options
✅ Click-outside detection to close dropdown

Installation

To start using @nixxy/react-simple-select, install it via npm or yarn:

npm install @nixxy/react-simple-select
# or
yarn add @nixxy/react-simple-select

Usage Example

Here’s how you can use it in your React project:

import SimpleSelect, { Option } from '@nixxy/react-simple-select';
import '@nixxy/react-simple-select/assets/react-simple-select.css';
import { useState } from 'react';

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

export default function App() {
  const [selected, setSelected] = useState<Option | Option[] | null>(null);

  return (
    <div>
      <h2>Single-Select Example</h2>
      <SimpleSelect options={options} onChange={setSelected} placeholder="Choose a fruit..." />

      <h3>Selected:</h3>
      <pre>{JSON.stringify(selected, null, 2)}</pre>
    </div>
  );
}

Multi-Select Example

<SimpleSelect options={options} onChange={setSelected} multiple placeholder="Choose fruits..." />

Async Options Example

You can load options dynamically:

const fetchOptions = async () => {
  const response = await fetch('https://api.example.com/fruits');
  return response.json();
};

<SimpleSelect options={fetchOptions} onChange={setSelected} placeholder="Loading options..." />;

What’s Next?

I plan to add:

✅ Home/End key support to jump to first/last option
✅ Shift + Arrow keys for multi-select

Try It Live!

You can check out the live demo here: Live Demo

Feedback & Contributions

I’d love to hear your thoughts! Try it out, report issues, or contribute on GitHub:

👉 GitHub Repo

If you find this useful, consider giving it a ⭐ on GitHub and sharing your feedback. 🚀

DEV Community