
Research
Security News
The Growing Risk of Malicious Browser Extensions
Socket researchers uncover how browser extensions in trusted stores are used to hijack sessions, redirect traffic, and manipulate user behavior.
react-responsive-select
Advanced tools
A React customisable, touchable, single-select / multi-select form component. Built with keyboard and screen reader accessibility in mind.
A customisable, touchable, React single-select / multi-select form control.
Built with keyboard and screen reader accessibility in mind.
https://benbowes.github.io/react-responsive-select/demo/
Install the dependency - https://www.npmjs.com/package/react-responsive-select
npm install react-responsive-select -D
Example usage:
import React from 'react';
import ReactResponsiveSelect from 'react-responsive-select';
const onChange = (newValue) => console.log('onChange', newValue);
const onSubmit = () => console.log('onSubmit');
const Form = () => (
<form>
<ReactResponsiveSelect
name="make"
options={[
{ text: 'Any', value: 'null' },
{ text: 'Oldsmobile', value: 'oldsmobile', markup: <span>Oldsmobile</span> },
{ text: 'Ford', value: 'ford', markup: <span>Ford</span> }
]}
selectedValue="oldsmobile"
onSubmit={onSubmit}
onChange={onChange}
caretIcon={<CaretIcon />}
/>
</form>
);
A more detailed usage example can be found here: https://github.com/benbowes/react-responsive-select/blob/master/demo/src/index.js
The CSS in react-responsive-select/dist/ReactResponsiveSelect.css
is plain css. Use as-is, or alter it to meet your projects needs.
You can either include the base styles into your project via an import, or copy paste it's contents into your theming solution - be it css modules, sass/less, css-in-js. The styles are self contained (not global).
The class-names themselves are not configurable.
prop | type | description |
name (required) | String | The name to send with the selected option value(s) on form submit |
options (required) | Array of objects | Array of shape:
or
Note: |
onSubmit | Function | Some function that submits your form |
onChange | Function | Listen for changes on selected option change returns Note: |
onBlur | Function | Listen for blur when select loses focus returns Note: |
caretIcon | JSX | Add a dropdown icon by using JSX markup |
selectedValue | String | Pre-select an option with this value - should match an existing option.value , or if omitted the first item will be selected |
prefix | String | Prefix for the select label |
disabled | Boolean | Disables the select control |
noSelectionLabel | string | A custom label to be used when nothing is selected. When used, the first option is not automatically selected |
customLabelRenderer | Function | Allows you to format your own select label The customLabelRenderer function returns an option object e.g. To use this feature you need to return some JSX; using values from the above object to create your own custom label. See the example in the [singleselect demo](https://github.com/benbowes/react-responsive-select/blob/master/demo/src/index.js#L144). |
Same as Single Select API but with the following amendments
multiselect | Boolean | Makes the select control handle multiple selections. Check the implementation example here: https://benbowes.github.io/react-responsive-select/demo/ |
selectedValues | Array of String values | Pre-select several options with this value - should match against an existing option.value , or if omitted, the first item will be selected.
e.g. selectedValues={['mazda','ford']}
|
customLabelRenderer | Function | Allows you to format your own select label The customLabelRenderer function returns an array option objects e.g. To use this feature you need to return some JSX; using values from the above object to create your own custom label. See the example in the [multiselect demo](https://github.com/benbowes/react-responsive-select/blob/master/demo/src/index.js#L589-L591). |
noSelectionLabel | string | A custom label to be used when nothing is selected. When used, the first option is not automatically selected |
onChange | Function | Listen for changes in selection returns Note: |
onBlur | Function | Listen for blur when select loses focus returns Note: |
JS: https://unpkg.com/react-responsive-select@latest/dist/ReactResponsiveSelect.js
CSS: https://unpkg.com/react-responsive-select@latest/dist/ReactResponsiveSelect.css
The Codepen examples are consuming react-responsive-select via CDN if you'd like a guide.
{
"chrome": "62",
"android": "4.2",
"edge": "13",
"firefox": "56",
"ie": "11",
"ios": "10",
"safari": "10"
}
See: https://github.com/benbowes/react-responsive-select/releases/tag/3.0.0
Upgraded from React 15.x to React 16.x
For information about how this select control works on desktop and mobile see the Interaction tests readme README_INTERACTION_TESTS.md
FAQs
A customisable, touchable, React single-select / multi-select form control.
The npm package react-responsive-select receives a total of 1,535 weekly downloads. As such, react-responsive-select popularity was classified as popular.
We found that react-responsive-select demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover how browser extensions in trusted stores are used to hijack sessions, redirect traffic, and manipulate user behavior.
Research
Security News
An in-depth analysis of credential stealers, crypto drainers, cryptojackers, and clipboard hijackers abusing open source package registries to compromise Web3 development environments.
Security News
pnpm 10.12.1 introduces a global virtual store for faster installs and new options for managing dependencies with version catalogs.