ReactJS Evergreen Autocomplete Component

Last Updated : 05 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. Autocomplete Component is used for auto-completing the free text value with the option value. It basically allows the user to type and select the item from a list of options. We can use the following approach in ReactJS to use the Evergreen Autocomplete Component.

Autocomplete Props:

title: It is used to provide a title for the items.
items: It is used to denote an array of items to be used as options for the selection.
selectedItem: It is used to denote the selected Item to be shown on the Autocomplete.
itemToString: It is a function that is used on each item to return the string that will be shown on the filter in case the array of items is not an array of strings.
children: It is a function that is used to render the 'filter' component.
itemSize: It is used to denote the height of each item in the list.
renderItem: It is a function that returns a component to render the item.
position: It is used for the position of the popover.
itemsFilter: It is a function that is used to filter the items.
isFilterDisabled: It is used to enable and disable filtering.
popoverMinWidth: It is used to denote the minimum height of the result's container.
popoverMaxHeight: It is used to denote the maximum height of the result's container.
allowOtherValues: It is used to indicate whether the input accepts arbitrary user input beyond the provided items or not.

AutocompleteItem Props:

children: It is used to pass the children element for this component.
style: It is used to pass the styling for the component.
isSelected: It is used to indicate whether the item is selected or not.
isHighlighted: It is used to indicate whether to highlight the item or not.

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.

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 { Autocomplete, TextInput } from 'evergreen-ui'

export default function App() {
  return (
    <div style={{
      display: 'block', width: 700, paddingLeft: 30
    }}>
      <h4>ReactJS Evergreen Autocomplete Component</h4>
      <Autocomplete
        title="Weekdays"
        items={['Monday', 'Tuesday', 'Wednesday', 'Thursday', 
                'Friday', 'Saturday', 'Sunday']}
      >
        {props => {
          return (
            <TextInput
              placeholder="Enter Weekday"
              ref={props.getRef}
              value={props.inputValue}
              {... props.getInputProps()}
            />
          )
        }}
      </Autocomplete>
    </div>
  );
}