React Responsive Select Alternatives - React Select

Popularity

2.0

Growing

Activity

4.5

Stars 97

Watchers 3

Forks 17

Last Commit 6 months ago

Description

A customisable, touchable, React single-select / multi-select form control.

Built with keyboard and screen reader accessibility in mind.

Monthly Downloads: 0

Programming language: TypeScript

License: MIT License

Tags: UI Components Select React Multiselect

Latest version: v6.0.3

React Responsive Select alternatives and similar libraries

Based on the "Select" category.
Alternatively, view React Responsive Select alternatives based on common mentions on social networks and blogs.

react-select

9.9 8.7 React Responsive Select VS react-select

A Select control built with and for React JS.
React Virtualized Select

6.4 0.0 React Responsive Select VS React Virtualized Select

HOC that uses react-virtualized and react-select to display large lists of options in a drop-down https://bvaughn.github.io/react-virtualized-select/

Get performance insights in less than 4 minutes

Scout APM uses tracing logic that ties bottlenecks to source code so you know the exact line of code causing performance issues and can get back to building a great product faster.

Sponsored scoutapm.com

rc-select

6.3 8.1 React Responsive Select VS rc-select

React Select http://react-component.github.io/select/
react-selectize

5.6 0.0 React Responsive Select VS react-selectize

A Stateless & Flexible Select component for React inspired by Selectize.
React-Select-Plus

4.6 0.0 React Responsive Select VS React-Select-Plus

A fork of JedWatson/React-Select with support for option groups.
react-aria-menubutton

4.4 1.1 React Responsive Select VS react-aria-menubutton

A fully accessible, easily themeable, React-powered menu button.
react-select-box

3.9 0.0 React Responsive Select VS react-select-box

An accessible select box component for React.
react-selectrix

2.6 0.4 React Responsive Select VS react-selectrix

A Beautiful, Materialized and Flexible React Select Replacement
react-styled-select

2.2 0.0 React Responsive Select VS react-styled-select

A Select control built with Reactjs, styled-components and ❤️ http://agutoli.github.io/
react-combo-select

1.6 0.0 React Responsive Select VS react-combo-select

React dropdown for select and multiselect
mytabworks-react-select

0.4 0.2 React Responsive Select VS mytabworks-react-select

easy like breezy

Do you think we are missing an alternative of React Responsive Select or a related project?

Add another 'Select' Library

Popular Comparisons

README

react-responsive-select

Build status

A customisable, touchable, React single-select / multi-select form control.

Built with keyboard and screen reader accessibility in mind.

Features

Single and Multi select modes
Accessible WAI ARIA compliance
Touch friendly
Keyboard friendly
Similar interaction experience across platforms
Custom label rendering
Custom option markup
Option headers
Mimics keyboard functionality where possible (sans multiselect)
Easy slot-in to your design system

Getting started

Install the dependency - https://www.npmjs.com/package/react-responsive-select

npm install react-responsive-select -save-dev

Example usage (Single Select):

import React from 'react';
import { Select, CaretIcon, ModalCloseButton } from 'react-responsive-select';

// for default styles...
import 'react-responsive-select/dist/react-responsive-select.css';

const Form = () => (
  <form>
    <Select
      name="carType1"
      modalCloseButton={<ModalCloseButton />}
      options={[
        { value: 'null', text: 'Any' },
        { value: 'alfa-romeo', text: 'Alfa Romeo' },
        { value: 'bmw', text: 'BMW' },
        { value: 'fiat', text: 'Fiat' },
        { value: 'subaru', text: 'Subaru' },
        { value: 'suzuki', text: 'Suzuki' },
        { value: 'tesla', text: 'Tesla' },
        { value: 'volvo', text: 'Volvo' },
        { value: 'zonda', text: 'Zonda' },
      ]}
      caretIcon={<CaretIcon />}
      prefix="Car1: "
      selectedValue="subaru"
      onChange={(newValue) => console.log('onChange', newValue)}
      onSubmit={() => console.log('onSubmit')}
    />
  </form>
);

Example usage (Multi Select):

import React from 'react';
import { Select, CaretIcon, MultiSelectOptionMarkup, ModalCloseButton } from 'react-responsive-select';

// for default styles...
import 'react-responsive-select/dist/react-responsive-select.css';

const Form = () => (
  <form>
    <Select
      multiselect={true}
      name="make6"
      selectedValues={['fiat']}
      modalCloseButton={<ModalCloseButton />}
      options={[
        {
          value: 'any',
          text: 'Any',
          markup: <MultiSelectOptionMarkup text="Any" />,
        },
        {
          value: 'fiat',
          text: 'Fiat',
          markup: <MultiSelectOptionMarkup text="Fiat" />,
        },
        {
          value: 'subaru',
          text: 'Subaru',
          markup: <MultiSelectOptionMarkup text="Subaru" />,
        },
        {
          value: 'suzuki',
          text: 'Suzuki',
          markup: <MultiSelectOptionMarkup text="Suzuki" />,
        },
      ]}
      caretIcon={<CaretIcon />}
      onChange={(...rest) => console.log(rest)}
      onSubmit={() => console.log('onSubmit')}
    />
  </form>
);