Top 25 React Select Components Library

1.React Custom flag Select

React custom flag select component .A react custom flag (country code) select.

React Custom flag Select

Online Demo https://edwardfhsiao.github.io/react-custom-flag-select/

View on GitHub

2.React Select Tile

The Select control for React.

Check demo here

Link to CodeSandBox

React Select Tile

View on GitHub

3.React Awesome Selector

A selector component built with ReactJS. https://github.com/statebait/react-awesome-selector

React Awesome Selector

View on GitHub

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.

React Functional Select

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

View on GitHub

5.React slct

Select Box based on react and styled components .Yet another Select-Box based on react, styled-components and react-window.

React slct

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.

View on GitHub

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.

Use Context Selector

View on GitHub

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.

Selectable items for React

Demo http://unclecheese.github.io/react-selectable/example

View on GitHub

8.React Target Time

Component for select hour on week
react-target-time component for select time on week

Features

  • i18n

React Target Time

View on GitHub

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.

React Selections

View on GitHub

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.

React Triple Select Box

View on GitHub

11.React Select Plus

A fork of JedWatson/React-Select with support for option groups.
React Select Plus

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/

View on GitHub

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.
React async select

Live demo: https://opuscapita.github.io/react-async-select/

View on GitHub

13.React dropdown select

Customizable dropdown select for react.
React dropdown select

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/

View on GitHub

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.
React list select

View the example.

View on GitHub

15.React custom flag select

A react custom flag (country code) select.
React custom flag select

Online Demo
Live demo

Codesandbox Examples
Live demo playground

View on GitHub

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

React dropdown tree select

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

View on GitHub

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.

React range selector

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

Demo
View on GitHub

18.React select me

A highly scalable react dropdown list.

React select me

Demo

View on GitHub

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 Fuzzy Picker

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

View on GitHub

20.itsa react select

Nice select for react.

Lightweight, focussable and responses to the keyboard.
itsa react select

View on GitHub

21.React Available Times

A React component that allows a user to select time-slots in a calendar-like UI.

React Available Times

View on GitHub

22.React Select Checked

A React select component based on JedWatson/React-Select with checkmarks on selected options.
React Select Checked

View on GitHub

23.React flags select

A customizable svg flags select components for React Js.
React flags select

Demo and Example
Live demo: https://ekwonye-richard.github.io/react-flags-select/

View on GitHub

24.React styled select

A Select control built with Reactjs, styled-components.
React styled select

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.

View on GitHub

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.

Yet another React multiselect

View on GitHub

#reactjs #javascript

Top 25 React Select Components Library
113.15 GEEK