Open In App

React Suite Components TagInput

Improve
Improve
Like Article
Like
Save
Share
Report

React Suite is a front-end library designed for the middle platform and back-end products. The TagInput Component allows the user to add inputs. It allows the user to add multiple values or multiple inputs for a certain field.

Syntax:

// Importing Module
import { TagInput } from 'rsuite';

// Using
<TagInput />

The available props are:

  • defaultValue: It takes an array of Strings.
  • disabled: A boolean value. It denotes whether the component is disabled or not. 
  • onChange: A void Callback function that gets fired when a value changes.
  • onClean: A void Callback fired when value cleans
  • size: It is denoted by  ‘lg’ or ‘md’ or ‘sm’ or ‘xs’. Here “lg” stands for large, “md” stands for medium, “sm” stands for “small” and “xs” stands for “extra small”.
  • trigger: It takes an array of String that can consist of values like ‘Enter’ | ‘Space’ | ‘Comma’.It sets the trigger for creating tags
  • value: It takes an array of String. It specifies the value of selected items.

Prerequisite:

  • Introduction and installation reactJs

Creating React Application and Module installation:

Step 1: Create the react project folder, for that open the terminal, and write the command npm create-react-app folder name, if you have already installed create-react-app globally. If you haven’t, install create-react-app globally using the command npm -g create-react-app or install locally by npm i create-react-app.

npm create-react-app project

Step 2: After creating your project folder(i.e. project), move to it by using the following command.

cd project

Step 3: Now install the dependency by using the following command:

npm install rsuite

Project Structure: It will look like this:

 

Example 1: We are importing the TagInput Component from “rsuite”, and to apply the default styles of the components we are importing “rsuite/dist/rsuite.min.css”. We are adding the TagInput component with a default value as “default”, and a placeholder as “Enter Anything”, we are also calling the onClean event, which triggers the onCleanHandler function that shows “entries will be erased”, whenever we clear the TagInput field.

App.js




import { TagInput } from "rsuite";
import "rsuite/dist/rsuite.min.css";
function App() {
    const onCleanHandler = (e) => {
        alert("entries will be erased");
    };
    return (
        <div className="App">
            <h4>React Suite TagInput </h4>
            <TagInput
                size="lg"
                placeholder="Enter anything"
                defaultValue={["default"]}
                onClean={onCleanHandler}
                style={{ width: "300px" }}
            />
        </div>
    );
}
  
export default App;


Step to Run Application: Run the application using the following command from the project’s root directory.

npm start

Output:

 

Example: We are importing the TagInput Component from rsuite, and to apply the default styles of the components we are importing “rsuite/dist/rsuite.min.css”.

App.js




import { TagInput } from "rsuite";
import "rsuite/dist/rsuite.min.css";
function App() {
    const onChangeHandler = (e) => {
        alert(e);
    };
    return (
        <div className="App">
            <h4>React Suite TagInput </h4>
            <TagInput
                size="sm"
                placeholder="Enter anything"
                onChange={onChangeHandler}
                block
            />
            <TagInput value={["read - only"]}
                style={{ width: "200px" }} readOnly />
            <TagInput value={["disabled"]}
                style={{ width: "200px" }} disabled />
            <h5>
                Press either <span style={{ color: "red" }}>
                    Enter,Space,Comma</span>
                for separate entries:
            </h5>
            <TagInput
                trigger={["Enter", "Space", "Comma"]}
                size="lg"
                defaultValue={["large"]}
                style={{ width: "200px" }}
            />
        </div>
    );
}
  
export default App;


Step to Run Application: Run the application using the following command from the project’s root directory.

npm start

Output:

 

Explanation: In the first TagInput component, we are assigning the size as “sm” which denotes the small size, we are also calling an onchange function naming onChangeHandler which gets triggered when we press enter after entering some values, this function shows the values added in the alert box. We have also set block property which by default makes the width of the component cover the window’s width.

In the next one, we set the value as read-only and added the readOnly property, and also set a width of 200px using inline-styling.

In the third TagInput field, we have made it disabled using the disabled property.

In the last TagInput filed we have used the trigger props which take “Enter”, “Space” and “Comma”.So, after entering some value if we press Enter or Space or Comma, the value gets added to the field and has kept large as a default value.

Reference: https://rsuitejs.com/components/tag-input/



Last Updated : 25 Jun, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads