React Select Menu
Simple Select Menu working with React
- Installation
- Usage/Examples
- Report a bug
- Request a feature
- Data Formats
- Props
Installation
Install react-select-menu with npm
npm i @fsmnk/react-select-menuReport a bug
Report a bug : here
Request a feature
Request a feature : here
Usage/Examples
import Select from '@fsmnk/react-select-menu';
function App() {
const options = [
{ value: 'Option 0' },
{ value: 'Option 1' },
{ value: 'Option 2' },
{
label: 'Group 1',
options: [
{ value: 'Option 3' },
{ value: 'Option 4' },
{ value: 'Option 5' },
],
},
];
return (
<div className="App">
<Select id="id" options={options} />
</div>
);
}Option format
{
value: string; // required
isDisabled: boolean; // optional
isVisible: boolean; // optional
}Group format
{
label: string; // required
options: Option[]; // optional
}Props
| Name | Required | Default | Type | Example |
|---|---|---|---|---|
| id | yes | undefined | string | Click |
| options | yes | undefined | Array | Click |
| className | no | '' | string | Click |
| style | no | undefined | Object | Click |
| defaultValue | no | undefined | string | Click |
| placeholder | no | undefined | string | Click |
| label | no | undefined | string | Click |
| zIndex | no | 1 | number | Click |
| offset | no | undefined | Object | Click |
| isDisabled | no | false | boolean | Click |
| isClearable | no | false | boolean | Click |
| isSearchable | no | false | boolean | Click |
| isForcedOpen | no | false | boolean | Click |
| isRequired | no | false | boolean | Click |
| closeOnSelect | no | true | boolean | Click |
| onChange | no | undefined | function | Click |
| onClose | no | undefined | function | Click |
| onCreate | no | undefined | function | Click |
| onFocus | no | undefined | function | Click |
| onOpen | no | undefined | function | Click |
| onSelect | no | undefined | function | Click |
Props Examples
id
id is used to add a unique id to link label to the input
<Select id="example-id" options={options} />options
options is an Array of Object, used to generate the list in the Select-Menu
const options = [
{ value: 'Option 0' },
{ value: 'Option 1' },
{ value: 'Option 2' },
];
<Select id="id" options={options} />;className
className simply add classes to the component
<Select id="id" options={options} className="class1 class2 class3" />style
style is used to add custom style to components
const customStyle = {
select: {
backgroundColor: 'red',
}, // optional
input: {
padding: '1rem',
}, // optional
menu: {
color: 'blue',
}, // optional
list: {
backgroundColor: 'green',
}, // optional
item: {
color: 'purple',
}, // optional
};
<Select id="id" options={options} style={customStyle} />;defaultValue
defaultValue is the default value of the input (when component created)
const options = [
{ value: 'Option 0' },
{ value: 'Option 1' },
{ value: 'Option 2' },
];
<Select id="id" options={options} defaultValue={options[0].value} />;placeholder
placeholder is the placeholder of the input
<Select id="id" options={options} placeholder="Placeholder example" />label
label of the input, linked with the id prop
<Select id="id" options={options} label="Label example" />offset
offset is the X (left) & Y (top) placement of the menu from the input
const customOffset = {
top: 50, // in px
left: 100, // in px
}
<Select id="id" options={options} offset={customOffset} />zIndex
zIndex is the z-index of the component
<Select id="id" options={options} zIndex={10} />isDisabled
isDisabled disable or not the input
<Select id="id" options={options} isDisabled />isClearable
isClearable add the possibility to clear the input value (icon appear when input value isn't null)
<Select id="id" options={options} isClearable />isSearchable
isSearchable add the possibility to search for option from input value
<Select id="id" options={options} isSearchable />isForcedOpen
isForcedOpen tell that the menu is always open
<Select id="id" options={options} isForcedOpen />isRequired
isRequired tell that the input value is required
<Select id="id" options={options} isRequired />closeOnSelect
closeOnSelect tell that the menu is closed or not when an item is selected
<Select id="id" options={options} closeOnSelect={false} />onChange
onChange trigger when input value change
<Select id="id" options={options} onChange={() => console.log('onChange')} />onClose
onClose trigger when menu is closed
<Select id="id" options={options} onClose={() => console.log('onClose')} />onCreate
onCreate trigger when component is create
<Select id="id" options={options} onCreate={() => console.log('onCreate')} />onFocus
onFocus trigger when input is focused
<Select id="id" options={options} onFocus={() => console.log('onFocus')} />onOpen
onOpen trigger when menu is opened
<Select id="id" options={options} onOpen={() => console.log('onOpen')} />onSelect
onSelect trigger when option is selected
<Select id="id" options={options} onSelect={() => console.log('onSelect')} />