React Select

The React Select is a customizable and accessible dropdown select component for reactjs, built from scratch for flexibility and performance. Supports single and multi-select options, with an intuitive API for easy integration.

Demo

Table of Content

• React Select
• Documentation
• Installation
• Usage
• Features

Installation

You can install the React Select component via npm:

npm i @zener/react-select

Usage

Basic Implementation

import Select from '@zener/react-select';
import '@zener/react-select/index.css';

const App = () => {
  const [selected, setSelected] = useState(undefined);
  const options = [
    { label: 'apple', value: 'apple' },
    { label: 'ball', value: 'ball' },
    { label: 'cat', value: 'cat' },
    { label: 'dog', value: 'dog' },
  ];
  return (
    <Select
      value={selected}
      onChange={(_,val) => {
        setSelected(val);
      }}
      options={async () => options}
    />
  );
};

Features

• Virtual Scrolling at it's core
• Customizable components support
• Typeahead support
• Complete keyboard navigation
• Multiple selection support
• Support for Asynchronous options loading
• Supports items, labels, groups of items
• Fully managed focus
• Written in TypeScript