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>neveropen</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>neveropen</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
