react-select
Accessible select (in React).
Install
npm i @bscop/react-select
Usage
import Select from "@bscop/react-select";
function App () {
return (
<Select
label="Pick a fruit"
onChange={
(option) => {
alert(`Option selected: "${option.label}"`);
}
}
options={
[
{
id: "a",
label: "Apple",
},
{
id: "b",
label: "Banana",
},
{
id: "c",
label: "Cherry",
},
]
}
/>
);
}Props
- [className]
Optional. Additional css class that is going to be applied on the select root element.
- [disabled]
Optional. Default false. Determine whether the selected should be selected.
- label
A label that describes the purpose of the select component.
- options
List of options.
Each option should have shape as { id : string; label : string; value ?: string | number; }
- [onChange]
Optional. Handler executed when the selected option change.
Receive the new selected option, and its index, as argument.
- [placeholder]
Optional. Determine the label rendered in the select hook button when there's no selected option.
- [renderHook]
Optional. Permits to customise the content of the select hook button.
- [renderOption]
Optional. Permits to customise how each option is rendered.
- [scrollable]
Optional. Default false. Determine whether the option list should be scrollable, in case the select contains a large number of options.
- [value]
Optional. Value of the selected option.
CSS Custom properties
You can set the following CSS Custom properties to customize the look of the dropdown component:
:root {
--main-color: black;
--main-bg-color: white;
--dropdown-hook-border-color: #000;
--dropdown-hook-disabled-border-color: #bababa;
--dropdown-border-color: #bababa;
--select-caret: url("data:image/png;base64,...");
--select-active-option-bg-color: #eaeaea;
}Contribute
Read the guidelines.
Run tests
npm test
Coverage
Coverage reports are hosted on codecov.
npm run badge:coverage -- --token=<guid>
Bruno Scopelliti
www.brunoscopelliti.com