Top 25 React Select Components Library
1.React Custom flag Select
React custom flag select component .A react custom flag (country code) select.
Online Demo https://edwardfhsiao.github.io/react-custom-flag-select/
2.React Select Tile
The Select control for React.
Check demo here
Link to CodeSandBox
3.React Awesome Selector
A selector component built with ReactJS. https://github.com/statebait/react-awesome-selector
4.React Functional Select
Micro-sized & micro-optimized select component for ReactJS.
This project was inspired by react-select. If you need some features not provided, I suggest checking that package out.
Key features:
- Fully-featured package that is truly lightweight: ~7.85 KB (gzipped)!
- Extensible styling API with styled-components
- Opt-in properties to make the component fully accessible
- Effortlessly scroll, filter, and key through datasets numbering in the tens of thousands via react-window + performance conscious code
5.React slct
Select Box based on react and styled components .Yet another Select-Box based on react, styled-components and react-window.
Features
- Single-select
- Multi-select
- Searchable
- Clearable
- Disabled (whole box or single options)
- Creatable in single- and multi-select
- Automatic menu-position (top or bottom)
- Customizable components
- Native support (e.g. on mobile devices)
- Full keyboard-support inkl. TAB-behavior
- Auto-select options in non-searchable box via keyboard-typing
- Makes use of React Portals to render menu
- 100% typescript
- Supports headless-mode, to gain full control of what’s being rendered.
6.Use Context Selector
React Context and useContext is often used to avoid prop drilling, however it’s known that there’s a performance issue. When a context value is changed, all components that useContext will re-render.
useContextSelector is recently proposed. While waiting for the process, this library provides the API in userland.
7.Selectable items for React
A component for react that allows mouse selection of child items .Allows individual or group selection of items using the mouse.
Demo http://unclecheese.github.io/react-selectable/example
8.React Target Time
Component for select hour on week
react-target-time component for select time on week
Features
- i18n
9.React Selections
A library for drawing interactive selections written for react applications.This is a library that provides a set of tools for drawing regions with cursor.
10.React Triple Select Box
A simple, dependencies-free and dumb react component to render triple select boxes. Since version 2.0.0 requires React v16.8 or greater.
11.React Select Plus
A fork of JedWatson/React-Select with support for option groups.
This fork is no longer actively maintained. The primary purpose of this project was to add option group support to react-select, a feature that will be supported in the upcoming react-select 2.0. Another alternative worth checking out is downshift, which provides low-level building blocks for building custom dropdown components.
Demo & Examples
Live demo: http://github.hubspot.com/react-select-plus/
12.React async select
Async dropdown component with advanced search modal.This component is a combination of a combobox with asynchronous fetching of results and a modal search dialog for more filtering possibilities.
Live demo: https://opuscapita.github.io/react-async-select/
13.React dropdown select
Customizable dropdown select for react.
Features
- configurable via props
- total custom components overrides for all internals via render prop callbacks (with access to internal props, state and methods)
- stylable via css (or custom components)
- portal support for rendering dropdown outside local DOM tree. e.g. in document.body
- auto position
- small bundle size
Live demo: https://sanusart.github.io/react-dropdown-select/
14.React list select
A list with selectable and keyboard navigable items. Useful as a dropdown (autocomplete), right click menu, or a simple list with actions triggered on item select.
View the example.
15.React custom flag select
A react custom flag (country code) select.
Online Demo
Live demo
Codesandbox Examples
Live demo playground
16.React dropdown tree select
Lightweight, accessible, customizable and fast Dropdown Tree Select component for React.A lightweight and fast control to render a select component that can display hierarchical tree data. In addition, the control shows the selection in pills and allows user to search the options for quick filtering and selection. Also supports displaying partially selected nodes
Demo
Vanilla, no framework
Online demo: https://dowjones.github.io/react-dropdown-tree-select/#/story/with-vanilla-styles
With Bootstrap
Online demo: https://dowjones.github.io/react-dropdown-tree-select/#/story/with-bootstrap-styles
With Material Design
Online demo: https://dowjones.github.io/react-dropdown-tree-select/#/story/with-material-design-styles
As Single Select
Online demo: https://dowjones.github.io/react-dropdown-tree-select/#/story/simple-select
17.React range selector
support select range between “from point” and “to point”.
the html5 input range only supports one point, and it’s not easy to use for mobile. this npm pack is an alternative solution with input checkbox.
Features
- based on BEM
- has "is-start " class, “in-range” and “is-end” class for special styling set
- support initial selected range
- support customize range
- standalong react plugin with options set for your quick prototype, check the Demo
18.React select me
A highly scalable react dropdown list.
19.React Fuzzy Picker
A React component that implements a fuzzy picker (similar to Sublime Text’s command palette or Slack’s channel switcher). In a nutshell, it provides a quick way for user’s to pick from a long list of items.
React component that implements a fuzzy picker (like sublime text’s command pallete, or slack’s channel switcher).
Live Demo: https://1egoman.github.io/fuzzy-picker
20.itsa react select
Nice select for react.
Lightweight, focussable and responses to the keyboard.
21.React Available Times
A React component that allows a user to select time-slots in a calendar-like UI.
22.React Select Checked
A React select component based on JedWatson/React-Select with checkmarks on selected options.
23.React flags select
A customizable svg flags select components for React Js.
Demo and Example
Live demo: https://ekwonye-richard.github.io/react-flags-select/
24.React styled select
A Select control built with Reactjs, styled-components.
Up to date with react/react-dom 16.2.0
ATTENTION: Work in Progress (sorry about that!)
This project was built with styled-components and is a “rethink” of the awesome project react-select. But what the differences between react-select and this project?
- Lightweight!
- It don`t force you to load any external css.
- Works with css-modules concept and not with global class names. Here has a good discussion about this problem (here).
- CSS Variables: Very easy to customize for your need.
- Shadow DOM: If you has or had problems with input fields globally stylized you can “encapsulate” your component using this awesome feature.
25.Yet another React multiselect
Yet another React multiselect. With checkbox support instead of tags. When dealing with medium+ length select lists, especially multi-select lists. The common approach is to use tags e.g.
#reactjs #javascript
