Ant Design Library has this component pre-built, and it is very easy to integrate as well. Mentions Component is used for mention purposes, and it is used when the user needs to mention someone or something. We can use the following approach in ReactJS to use the Ant Design Mentions Component.
Mentions Props:
- autoFocus: It is used to set the auto get focus when the component mounted.
- autoSize: It is used for the Textarea height auto-size feature.
- defaultValue: It is used to denote the Default value.
- filterOption: It is used to pass the customized filter option logic.
- getPopupContainer: It is used to set the mount HTML node for suggestions.
- notFoundContent: It is used to set the mentions content when not match.
- placement: It is used to set the popup placement.
- prefix: It is used to set trigger prefix keyword.
- split: It is used to set the split string before and after selected mention.
- validateSearch: It is used for the customized trigger search logic.
- value: It is used to set the value of mentions.
- onBlur: It is a callback function that is triggered when mentions lose focus.
- onChange: It is a callback function that is triggered when the value changed.
- onFocus: It is a callback function that is triggered when mentions get focus.
- onResize: It is a callback function that is triggered when Textarea resizes.
- onSearch: It is a callback function that is triggered when prefix hit.
- onSelect: It is a callback function that is triggered when the user selects the option.
Option Props:
- children: It is used for the suggestion content
- value: It is used to denote the value of suggestion and this value will insert into the input filed when selected.
Methods:
- blur(): This function is used to remove the focus.
- focus(): This function is used to get the focus.
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 antd
Project Structure: It will look like the following.
Project Structure
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 "antd/dist/antd.css"; import { Mentions } from 'antd'; const { Option } = Mentions; export default function App() { return ( <div style={{ display: 'block', width: 700, padding: 30 }}> <h4>ReactJS Ant-Design Mentions Component</h4> <> <Mentions defaultValue="@Gourav" onChange={(data) => {console.log(data)}} onSelect={(option)=> {console.log(option)}} > <Option value="Gourav">Gourav</Option> <Option value="Ashutosh">Ashutosh</Option> <Option value="Kartik">Kartik</Option> <Option value="Nikhil">Nikhil</Option> </Mentions> </> </div> ); } |
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output: Now open your browser and go to http://localhost:3000/, you will see the following output:
Reference: https://ant.design/components/mentions/
