Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

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:

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

  • 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




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!