SelectMenu React component A very easy to use and customisable React select dropdown.
Interactive example page Design your own SelectMenu component here : Interactive SelectMenu example page
Features
$3 - array of options with or without values
$3 - handles a custom onChange function to get the selected option's value
$3 - link your select label with the SelectMenu component
$3
$3
$3 - a default selected option can be set
$3 - displays a button to clear the selected option
$3 - dropdown can display eather on bottom or top of the select input
$3 - aria attributes
$3
$3 - In V2, some classNames are added for a better CSS control.
$3 - via props
Installation > npm i @zafle/select_menu
$3 - NodeJS >= 20.18.0
Basic usage The only required prop is options for a basic usage.
``jsx
export default function App() {
return
Advanced usage
$3 - #### Options with values
To use an array of options with values, use textField and valueField props.
`jsx
export default function App() {
return
- #### Options with optGroups
To use an array of options with optGroups, use optGroupLabelField and optGroupOptionsField props.
`jsx
export default function App() {
return (
- #### Options with optGroups and values
To use an array of options with optGroups and values, use optGroupLabelField, optGroupOptionsField, textField and valueField props.
`jsx
export default function App() {
return (
$3 - #### Controlled Form
To use the SelectMenu component in a controlled form, use onChangeValue prop.
`jsx
export default function App() {
const options = ['Blue', 'Yellow', 'Green', 'Red', 'Purple']
const handleChange = (option) => {
return (
The selected option is {selectedValue}
)
}
`
- #### Uncontrolled Form
To use SelectMenu in an uncontrolled form, use
name
prop.
`
jsxexport default function App() {
const options = ['Blue', 'Yellow', 'Green', 'Red', 'Purple']
const getFormData = (e) => {
return (
The selected option is {formData}
Validate `
$3 In V2 only, to enable reset programmatically, the form must be controlled and the
selectedOption
prop is required.-
selectedOption
allows to reset the SelectMenu component by clearing selection value programmatically by changing its value to null
| ''. -
null
: giving a null value to selectedOption
will reset the selection to the default value even when selected option === ''''
: giving an empty string value will not reset the selected option to its default value when selected option === '' (it will reset on empty string)- To reset on default value (which can be set with
defaultSelectedOption
), set resetToDefault
prop to true
.
`
jsxexport default function App() {
const options = ['Blue', 'Yellow', 'Green', 'Red', 'Purple']
const handleChange = (option) => {
const handleOnClickReset = () => {
return (
The selected option is {selectedValue}
Reset `
$3 To link your
tag to the SelectMenu component, use id prop, and set htmlFor attribute in your tag accordingly.
`jsxexport default function App() {
return (Choose a color
`
$3 SelectMenu is set to display all necessary aria attributes.
For a full accessible experience set the
prop accordingly to the id attribute of the tag to enable the aria-labelledBy attribute to be efficient.
`jsxexport default function App() {
return (Choose a color
`
Component props | Prop | Description | Value example(s) |options Required Different types of options data |onChangeValue Controlled Form |selectedOption
prop.NOTE: for controlled forms only. | Enable reset programmatically |resetToDefault NOTE: for controlled forms only. | Enable reset programmatically |name Uncontrolled Form |textField NOTE: Must be used with valueField. | Options with values |valueField NOTE: Must be used with textField. | Options with values |optGroupLabelField NOTE: Must be used with optGroupOptionsField. | Options with optGroups |optGroupOptionsField NOTE: Must be used with optGroupLabelField. | Options with optGroups |id Label and SelectMenu component link |labelId Accessibility |defaultSelectedOption maxWidth border borderRadius containerMargin boxShadow boxShadowOnOpen true = only when dropdown is open, false` = always visible |colorOnFocus inputHeight inputBackground inputTextColor inputVerticalPadding inputHorizontalPadding inputFontSize dropdownBackground dropdownMaxHeight dropdownVerticalPadding dropdownPosition optionTextColor hoveredOptionBackground hoveredOptionTextColor optionVerticalPadding optionHorizontalPadding optionFontSize optGroupLabelTextColor optGroupLabelFontSize optGroupVerticalPadding optGroupHorizontalPadding optGroupMarginTop
License MIT
Author Zafle