Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/benbowes/react-responsive-select
A customisable, touchable, React select / multi-select form control. Built with keyboard and screen reader accessibility in mind
https://github.com/benbowes/react-responsive-select
accessible dropdown react responsive select touch
Last synced: about 1 month ago
JSON representation
A customisable, touchable, React select / multi-select form control. Built with keyboard and screen reader accessibility in mind
- Host: GitHub
- URL: https://github.com/benbowes/react-responsive-select
- Owner: benbowes
- License: mit
- Created: 2017-02-09T11:13:53.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2024-09-12T15:59:01.000Z (2 months ago)
- Last Synced: 2024-09-27T17:42:56.814Z (about 2 months ago)
- Topics: accessible, dropdown, react, responsive, select, touch
- Language: TypeScript
- Homepage: https://benbowes.github.io/react-responsive-select/
- Size: 18.4 MB
- Stars: 108
- Watchers: 2
- Forks: 17
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-responsive-select
## Deprecated
> Use another select component please. This one was created many years ago as there was not a sensible WCAG select. Now there are plenty. Use one of those. I will not be updating this one in the foreseeable future.
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
- It's about 25kb
## Getting started
Install the dependency - https://www.npmjs.com/package/react-responsive-select
`npm install react-responsive-select --save-dev`
Example usage (Single Select):
```jsx
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 = () => (
}
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={}
prefix="Car1: "
selectedValue="subaru"
onChange={newValue => console.log('onChange', newValue)}
onSubmit={() => console.log('onSubmit')}
/>
);
```
Example usage (Multi Select):
```jsx
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 = () => (
}
options={[
{
value: 'any',
text: 'Any',
markup: ,
},
{
value: 'fiat',
text: 'Fiat',
markup: ,
},
{
value: 'subaru',
text: 'Subaru',
markup: ,
},
{
value: 'suzuki',
text: 'Suzuki',
markup: ,
},
]}
caretIcon={}
onChange={(...rest) => console.log(rest)}
onSubmit={() => console.log('onSubmit')}
/>
);
```
## Examples & Demo
https://benbowes.github.io/react-responsive-select/
## API
https://benbowes.github.io/react-responsive-select/#/API
## Screen Reader Demo
https://benbowes.github.io/react-responsive-select/#/Screen%20reader%20demo
## Business Rules
Have a read of [README_BUSINESS_RULES.md](./README_BUSINESS_RULES.md)
## Upgrade from v6 - v7
From version 7.0.0 on, you will need to use a `key` prop to update react-responsive-select's internal state. More on that here: https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#recommendation-fully-uncontrolled-component-with-a-key
There are some examples in the recipe section here: https://benbowes.github.io/react-responsive-select/