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 suffix. The AutoComplete component auto-completes the free text value with the given option value. A suffix is added as a custom text input that follows the user input.
Syntax:
<AutoComplete data={data} onChange={handleChange} />
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: The below example demonstrates the basic suffix usage in an autocomplete component.
Javascript
import { useState } from "react"; import { AutoComplete } from "rsuite"; import "rsuite/dist/rsuite.min.css"; const suffixes = [ '@hotmail.com', '@gmail.com', '@outlook.com', '@geeksforgeeks.org', ] export default function App() { const [data, setData] = useState([]); const handleChange = value => { const at = value.match(/@[\S]*/); const nextData = at ? suffixes .filter(item => item.indexOf(at[0]) >= 0) .map(item => { return `${value}${item.replace(at[0], '')}`; }) : suffixes.map(item => `${value}${item}`); setData(nextData); }; return ( <div> <div style={{ textAlign: "center" }}> <h2>neveropen</h2> <h4 style={{ color: "green" }}> React Suite AutoComplete Suffix </h4> </div> <div style={{ padding: 20, textAlign: 'center' }}> <div style={{ width: 300 }}> <AutoComplete data={data} onChange={handleChange} /> </div> </div> </div> ); } |
Output:
Example 2: The below example demonstrates the suffix usage in an autocomplete component with a placeholder.
Javascript
import { useState } from "react"; import { AutoComplete } from "rsuite"; import "rsuite/dist/rsuite.min.css"; const suffixes = [ '@hotmail.com', '@gmail.com', '@outlook.com', '@geeksforgeeks.org', ] export default function App() { const [data, setData] = useState([]); const handleChange = value => { const at = value.match(/@[\S]*/); const nextData = at ? suffixes .filter(item => item.indexOf(at[0]) >= 0) .map(item => { return `${value}${item.replace(at[0], '')}`; }) : suffixes.map(item => `${value}${item}`); setData(nextData); }; return ( <div> <div style={{ textAlign: "center" }}> <h2>neveropen</h2> <h4 style={{ color: "green" }}> React Suite AutoComplete Suffix </h4> </div> <div style={{ padding: 20, textAlign: 'center' }}> <div style={{ width: 300 }}> <AutoComplete data={data} onChange={handleChange} placeholder="Enter your Email" /> </div> </div> </div> ); } |
Output:
Reference: https://rsuitejs.com/components/auto-complete/#autocomplete-suffix
