React Suite Autocomplete custom render item

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

Output:

Reference: https://rsuitejs.com/components/auto-complete/#custom-render-item