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>
);
} |
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