ReactJS Evergreen SelectMenu Component

Last Updated : 11 Jun, 2021

React Evergreen is a popular front-end library with a set of React components for building beautiful products as this library is flexible, sensible defaults, and User friendly. SelectMenu Component allows the user to select multiple items from a dropdown list. We can use the following approach in ReactJS to use the Evergreen SelectMenu Component.

Option Props:

children: It is used to pass the children element to this component.
disabled: It is used to indicate whether the option is disabled or not.
height: It is used to denote the height.
isHighlighted: It is used to indicate whether to highlight an item or not.
isSelectable: It is used to indicate whether an item is selectable or not.
isSelected: It is used to indicate whether an item is selected or not.
item: It is used to denote the item for our SelectMenu.
onSelect: It is a function that is triggered when an option is selected.
onDeselect: It is a function that is triggered when an option is deselected.
style: It is used for styling the component.

OptionsList Props:

options: It is used to denote the options to show in the menu.
close: It is a function that is triggered on the close of the component.
width: It is used to denote the width of the Select Menu.
height: It is used to denote the height of the Select Menu.
isMultiSelect: The multi-select is accounted for when this is set to true.
closeOnSelect: Menu closes on option selection when this is set to true.
selected: It is used to denote the selected value/values.
onSelect: It is a function that is triggered when an option is selected.
onDeselect: It is a function that is triggered when an option is deselected.
onFilterChange: It is a function that is triggered for the onChange event for the filter.
hasFilter: It is used to show the filter when this is set to true.
optionSize: It is used to denote the option size.
renderItem: It is a function that can be used to render the items.
filterPlaceholder: It is used to denote the placeholder of the search filter.
filterIcon: It is used to denote the icon of the search filter.
optionsFilter: It is a function that is used to filter the options.
defaultSearchValue: It is used to denote the default search value.

SelectMenu Props:

title: It is used to denote the title for the Select Menu.
width: It is used to denote the width of the Select Menu.
height: It is used to denote the height of the Select Menu.
options: It is used to denote the options to show in the menu.
onSelect: It is a function that is triggered when an option is selected.
onDeselect: It is a function that is triggered when an option is deselected.
selected: It is used to denote the selected value/values.
isMultiSelect: The multi-select is accounted for when this is set to true.
hasTitle: It is used to show the title when this is set to true.
hasFilter: It is used to show the filter when this is set to true.
filterPlaceholder: It is used to denote the placeholder of the search filter.
filterIcon: It is used to denote the icon of the search filter.
onFilterChange: It is a function that is triggered for the onChange event for the filter.
position: It is used for the position of the Select Menu.
detailView: It is a function or a node that is rendered on the right side of the Select Menu to give additional information when an option is selected.
titleView: It is a function or a node that is rendered in the header section of the Select Menu to customize the header.
emptyView: It is a function or a node that is rendered instead of the options list when there are no options.
closeOnSelect: It is used to indicate whether to close the component on select or not.
itemRenderer: It is a function that can be used to render custom items in the select menu.
itemHeight: It is used to denote the height of the items in the select menu list.

SelectMenuContent Props:

close: It is a function that is triggered on the close of the component.
title: It is used to denote the title for the Select Menu.
width: It is used to denote the width of the Select Menu.
height: It is used to denote the height of the Select Menu.
headerHeight: It is used to denote the height of the header.
options: It is used to denote the options to show in the menu.
hasTitle: It is used to show the title when this is set to true.
hasFilter: It is used to show the filter when this is set to true.
filterPlaceholder: It is used to denote the placeholder of the search filter.
filterIcon: It is used to denote the icon of the search filter.
listProps: It is used to denote the list of props that are passed to this component.
isMultiSelect: The multi-select is accounted for when this is set to true.
closeOnSelect: Menu closes on option selection when this is set to true.
titleView: It is used to denote the node that is placed in the header section.
detailView: It is used to denote the node that is placed right next to the options.
emptyView: It is used to denote node that is displayed instead of options list when no options present.

Creating React Application And Installing Module:

Step 1: Create a React application using the following command:
```
npx create-react-app foldername
```
Step 2: After creating your project folder i.e. foldername, move to it using the following command:
```
cd foldername
```
Step 3: After creating the ReactJS application, Install the required module using the following command:
```
npm install evergreen-ui
```

Project Structure: It will look like the following.

Project Structure

Example: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.

App.js

import React from 'react'
import { SelectMenu, Button } from 'evergreen-ui'
  
export default function App() { 
  
  // State for selected  
  const [selected, setSelected] = React.useState(null) 
  
  // Sample Options 
  const options = [ 
    { label: 'Monday', value: 'Monday' }, 
    { label: 'Tuesday', value: 'Tuesday' }, 
    { label: 'Wednesday', value: 'Wednesday' }, 
    { label: 'Thursday', value: 'Thursday' }, 
    { label: 'Friday', value: 'Friday' }, 
    { label: 'Saturday', value: 'Saturday' }, 
    { label: 'Sunday', value: 'Sunday' }, 
  ] 
  
  return ( 
    <div style={{ 
      display: 'block', width: 700, paddingLeft: 30 
    }}> 
      <h4>ReactJS Evergreen SelectMenu Component</h4> 
      <SelectMenu 
        selected={selected} 
        options={options} 
        title="Select week day"
        onSelect={(item) => setSelected(item.value)} 
      ><Button> {selected || `Select Weekday`}</Button> 
      </SelectMenu> 
    </div> 
  ); 
}