[![NPM](https://img.shields.io/npm/v/react-functional-select.svg?style=flat-square)](https://www.npmjs.com/package/react-functional-select) [![npm downloads](https://img.shields.io/npm/dt/react-functional-select.svg?style=flat-square)](https://www.npmjs.com/package/react-functional-select) [![Issues](https://img.shields.io/github/issues/based-ghost/react-functional-select.svg?style=flat-square)](https://github.com/based-ghost/react-functional-select/issues) [![License](https://img.shields.io/badge/license-mit-red.svg?style=flat-square)](LICENSE) [![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?style=flat-square)](https://github.com/styled-components/styled-components) # react-functional-select > Micro-sized & micro-optimized select component for React.js See the accompanying [Interactive Storybook UI Site](https://master--625676b6922472003af898b4.chromatic.com) 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`](https://github.com/JedWatson/react-select) - Engineered for ultimate performance: effortlessly scroll, filter, and key through datasets numbering in the tens of thousands using [`react-window`](https://github.com/bvaughn/react-window) + performance-first code. [Demo of handling 50,000 options here!](https://master--625676b6922472003af898b4.chromatic.com/?path=/story/react-functional-select-demos--virtualization) - Extensible styling API with [`styled-components`](https://github.com/styled-components/styled-components) - Accessible Peer dependencies: - [`styled-components`](https://github.com/styled-components/styled-components) for dynamic styling/theming via CSS-in-JS - [`react-window`](https://github.com/bvaughn/react-window) for integrated menu option data virtualization ## Overview Essentially, this is a focused subset of [`react-select`](https://github.com/JedWatson/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 - [Demo](https://master--625676b6922472003af898b4.chromatic.com) - [Stories source code](./__stories__) ```jsx 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

react-functional-select

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Sick of boring JavaScript newsletters?

Downloads in past