@zafle/select_menu v2.0.8

Select_Menu React component

A very easy to use and customisable React select dropdown.

Live Select_Menu example usage

To try and design your own Select_Menu component and read more doc, visit Select_Menu page example

Features

V2 new releases

• Unique ID for each Select_Menu component

• Enable reset programmatically

  • New selectedOption prop

  • In V2, selectedOption allows to reset the SelectMenu component by clearing selection value programmatically by changing its value to null | ''.

  • To reset on default value (which can be set with defaultSelectedOption), set resetToDefault prop to true.

  NOTE : These functionnalities only work with controlled forms. Make sure to provide as welle onChangeValue prop.

• ClassNames for all essentials tags

  • In V2, some classNames are added for a better CSS control.

All versions features

• Different types of options data :

  • array of options with or without values
  • array of optgroup with labels

• Controlled form and uncontrolled form

  • handles a custom onChange function to get the selected option's value
  • handles the select native HTML behaviour

• Label and SelectMenu component link

  • link your select label with the SelectMenu component

• Accessibility

  • aria attributes
  • 100% control with keyboard

• Default selected option

  • a default selected option can be set

• Clear selection

  • displays a button to clear the selected option

• Dropdown position

  • dropdown can display eather on bottom or top of the select input

• Stylable component

  • via props
  • via external CSS

Installation

npm i @zafle/select_menu

Basic usage

Import SelectMenu component

import { SelectMenu } from "@zafle/select_menu"

Use

The only required prop is options for a basic usage.

const options = ["Blue", "Yellow", "Green", "Red", "Purple"]

<SelectMenu options={options} />

Advanced usage

Different types of options datas

• Options with values

To use an array of options with values, use textField and valueField props.

const options = [{option: "Blue", code: 01}, {option: "Red", code: 02}]

<SelectMenu options={options} textField="option" valueField="code" />

• Options with optGroups

To use an array of options with optGroups, use optGroupLabelField and optGroupOptionsField props.

const options = [
{
  label: "Fruits",
  options: ["Apple","Banana","Orange"]
},
{
  label: "Vegetables",
  options: ["Bean","Pea","Leek"]
}
]

<SelectMenu options={options} optGroupLabelField="label" optGroupOptionsField="options" />

• Options with optGroups and values

To use an array of options with optGroups and values, use optGroupLabelField, optGroupOptionsField, textField and valueField props.

const options = [
{
  label: "Fruits",
  options: [
    {option: "Apple", id: "F1"},
    {option: "Banana", id: "F2"},
    {option: "Orange", id: "F3"},
  ]
},
{
  label: "Vegetables",
  options: [
    {option: "Bean", id: "V1"},
    {option: "Pea", id: "V2"},
    {option: "Leek", id: "V3"},
  ]
}
]

<SelectMenu
  options={options}
  optGroupLabelField="label"
  optGroupOptionsField="options"
  textField="option"
  valueField="id"
/>

Controlled and uncontrolled Forms

• Controlled Form

To use the SelectMenu component in a controlled form, use onChangeValue prop.

const [selectedValue, setSelectedValue] = useState('')

const options = ['Blue', 'Yellow', 'Green', 'Red', 'Purple']

const handleChange = (option) => {
  setSelectedValue(option)
}

return (
  <>
    <p>The selected option is {selectedValue} </p>
    <SelectMenu options={options} onChangeValue={handleChange} />
  </>
)

• Uncontrolled Form

To use SelectMenu in an uncontrolled form, use name prop.

const [formData, setFormData] = useState('')

const options = ['Blue', 'Yellow', 'Green', 'Red', 'Purple']

const getFormData = (e) => {
  e.preventDefault()
  setFormData(e.target.color.value)
}

return (
  <>
    <p>The selected option is {formData} </p>
    <form
      onSubmit={(e) => {
        getFormData(e)
      }}
    >
      <SelectMenu options={options} name="color" />
      <button type="submit">Validate</button>
    </form>
  </>
)

Enable reset programmatically

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 | ''.

• To reset on default value (which can be set with defaultSelectedOption), set resetToDefault prop to true.

const [selectedValue, setSelectedValue] = useState('')

const options = ['Blue', 'Yellow', 'Green', 'Red', 'Purple']

const handleChange = (option) => {
  setSelectedValue(option)
}

const handleOnClickReset = () => {
  setSelectedValue('')
}

return (
  <>
    <p>The selected option is {selectedValue} </p>
    <SelectMenu
      options={options}
      onChangeValue={handleChange}
      selectedOption={selectedValue}
    />

    <button onClick={handleClickReset}>Reset</button>
  </>
)

Label and SelectMenu component link

To link your <label> tag to the SelectMenu component, use id prop, and set htmlFor attribute in your <label> tag accordingly. This will allow a click event on the label to trigger the opening of the SelectMenu dropdown.

const options = ['Blue', 'Yellow', 'Green', 'Red', 'Purple']

<label htmlFor="color-select">Choose a color</label>
<SelectMenu options={options} id="color-select" />

Accessibility

SelectMenu is set to display all necessary aria attributes. The whole component and its functionalities can be controlled with keyboard (tab and arrows).

For a full accessible experience set the labelId prop accordingly to the id attribute of the <label> tag to enable the aria-labelledBy attribute to be efficient.

const options = ['Blue', 'Yellow', 'Green', 'Red', 'Purple']

<label id="color-select-label">Choose a color</label>
<SelectMenu options={options} labelId="color-select-label" />

Component props

License

MIT

Author

Zafle