Micro-sized & micro-optimized select component for React.js

See the accompanying Interactive Storybook UI Site for live demos and detailed docs.

Key features:

Extremely lightweight: ~6 kB (gzipped)!
Advanced features like async mode, portal support, animations, and option virtualization
Fully-featured & customizable: API comparable to react-select
Engineered for ultimate performance: effortlessly scroll, filter, and key through datasets numbering in the tens of thousands using react-window + performance-first code. Demo of handling 50,000 options here!
Extensible styling API with styled-components
Accessible

Peer dependencies:

styled-components for dynamic styling/theming via CSS-in-JS
react-window for integrated menu option data virtualization

Overview

Essentially, this is a focused subset of react-select's API that is engineered for ultimate performance and minimal bundle size. It is built entirely with the React Hooks API (no legacy class components). The primary design principal revolves around weighing the cost/benefits of adding a feature against the impact to performance and/or number of lines of code its addition would have.

Any expected features not in the current API is likely due to the reason that such features would have added significant overhead to the package. In addition, if we expose the right public methods and/or callback properties, this feature should be trivial to add to wrapping components - proper decoupling and abstraction of code is key to keeping such channels open for similar customizations that can be kept out of this package. Please, feel free to offer enhancement ideas with/without technical solutions.

Installation

$ npm i react-window styled-components react-functional-select
$ yarn add react-window styled-components react-functional-select

Note that you need to be on a react version that supports hooks (>= 16.8.6)

Usage

"import { Select } from 'react-functional-select'; import React, { useState, useEffect, useCallback, type ComponentProps } from 'react'; import { Card, CardHeader, CardBody, Container, SelectContainer } from '../shared/components'; type SelectProps = ComponentProps ; type Option = Readonly<{ id: number; city: string; state: string; }>; const CITY_OPTIONS: Option[] = [ { id: 1, city: 'Austin', state: 'TX' }, { id: 2, city: 'Denver', state: 'CO' }, { id: 3, city: 'Chicago', state: 'IL' }, { id: 4, city: 'Phoenix', state: 'AZ' }, { id: 5, city: 'Houston', state: 'TX' } ]; const SingleSelect: React.FC = ({ isDisabled }) => { const [isInvalid, setIsInvalid] = useState (false); const [selectedOption, setSelectedOption] = useState (null); const getOptionValue = useCallback((opt: Option): number => opt.id, []); const onOptionChange = useCallback((opt: Option | null): void => setSelectedOption(opt), []); const getOptionLabel = useCallback((opt: Option): string => `${opt.city}, ${opt.state}`, []); useEffect(() => { if (isDisabled) { setIsInvalid(false); } }, [isDisabled]); return ( {`Selected Option: ${JSON.stringify(selectedOption || {})}`}