React Suite Autocomplete custom render item

Last Updated : 30 Aug, 2022

React suite is a library of React components, sensible UI design, and a friendly development experience. It is supported in all major browsers. It provides pre-built components of React which can be used easily in any web application.

In this article, we’ll learn about React suite Autocomplete custom render item. The AutoComplete component auto-completes the free text value with the given option value. We can also render a custom item in the autocomplete component.

Syntax:

<AutoComplete 
    data={data} 
    renderMenuItem={item => {
      return (
        <div>
          ...
        </div>
      );
    }}
/>

Creating React Application And Installing Module:

Step 1: Create a React application using the given command:

npm create-react-app projectname

Step 2: After creating your project, move to it using the given command:

cd projectname

Step 3: Now Install the rsuite node package using the given command:

npm install rsuite

Project Structure: Now your project structure should look like the following:

Example 1: Below example demonstrates the usage of custom icons with items in an autocomplete component.

Javascript

import "rsuite/dist/rsuite.min.css"; 
import { AutoComplete } from "rsuite"; 
import Code from '@rsuite/icons/legacy/Code'
  
const data = [ 
  'Data Structures', 
  'Algorithms', 
  'Development', 
  'Data Science', 
  'Networking'
] 
  
export default function App() { 
  return ( 
    <div> 
      <div style={{ textAlign: "center" }}> 
        <h2>GeeksforGeeks</h2> 
        <h4 style={{ color: "green" }}> 
          React Suite Autocomplete custom render item 
        </h4> 
      </div> 
      <div style={{ padding: 20, textAlign: "center" }}> 
        <div> 
          <AutoComplete 
            data={data} 
            style={{ width: 250 }} 
            renderMenuItem={(item) => { 
              return ( 
                <div> 
                  <Code /> {item} 
                </div> 
              ); 
            }} 
          /> 
        </div> 
      </div> 
    </div> 
  ); 
}

Output:

Example 2: Below example demonstrates the usage of custom-style list items in an autocomplete component.

Javascript

import "rsuite/dist/rsuite.min.css"; 
import { AutoComplete } from "rsuite"; 
import Code from "@rsuite/icons/legacy/Code"; 
  
const data = [ 
  "Data Structures", 
  "Algorithms", 
  "Development", 
  "Data Science", 
  "Networking", 
]; 
  
export default function App() { 
  return ( 
    <div> 
      <div style={{ textAlign: "center" }}> 
        <h2>GeeksforGeeks</h2> 
        <h4 style={{ color: "green" }}> 
          React Suite Autocomplete custom render item 
        </h4> 
      </div> 
      <div style={{ padding: 20, textAlign: "center" }}> 
        <div> 
          <AutoComplete 
            data={data} 
            renderMenuItem={(item) => { 
              return ( 
                <div 
                  style={{ 
                    backgroundColor: "#31D10A", 
                    color: "white", 
                    padding: 10, 
                    borderRadius: 20, 
                    fontSize: 15, 
                  }} 
                > 
                  <Code /> {item} 
                </div> 
              ); 
            }} 
          /> 
        </div> 
      </div> 
    </div> 
  ); 
} 