ReactJS Evergreen SelectMenu Component

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.

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

Reference: https://evergreen.segment.com/components/select-menu