ReactJS Blueprint TagInput Component

BlueprintJS is a React-based UI toolkit for the web. This library is very optimized and popular for building interfaces that are complex data-dense for desktop applications.

TagInput Component allows the user to type in multiple values as tags. We can use the following approach in ReactJS to use the ReactJS Blueprint TagInput Component.

TagInput Props:

• addOnBlur: The onAdd will be invoked when the input loses focus when this is set to true.
• addOnPaste: The onAdd will be invoked when the user pastes text containing the separator into the input when this is set to true.
• className: It is used to denote a space-delimited list of class names to pass along to a child element.
• disabled: It is used to indicate whether the component is non-interactive or not.
• fill: It is used to indicate whether the tag input should take up the full width of its container or not.
• inputProps: It is used to denote the React props to pass to the <input> element.
• inputRef: It is used to denote the ref handler for the <input> element.
• inputValue: It is used for the controlled value of the <input> element.
• intent: It is used to denote the visual intent color to apply to element.
• large: It is used to indicate whether the tag input should use a large size or not.
• leftIcon: It is used to denote the name of an Icon to render on the left side of the input.
• onAdd: Callback function that is triggered when new tags are added by the user pressing enter on the input.
• onChange: It is a callback function that is triggered when new tags are added or removed.
• onInputChange: It is a callback function that is triggered when the value of <input> element is changed.
• onKeyDown: It is a callback function that is triggered when the user depresses a keyboard key.
• onKeyUp: It is a callback function that is triggered when the user releases a keyboard key.
• onRemove: It is a callback function that is triggered when the user clicks the X button on a tag.
• placeholder: It is used to denote the input placeholder text which will not appear if values contain any items.
• rightElement: It is used to denote the element to render on right side of input.
• separator: It is used to denote the separator pattern used to split input text into multiple values.
• tagProps: It is used to denote the React props to pass to each Tag.
• values: It is used for the controlled tag values.

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. folder name, 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 @blueprintjs/core

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 '@blueprintjs/core/lib/css/blueprint.css';
import { TagInput } from "@blueprintjs/core";

function App() {

    // Sample Tags value
    const values = [
        'Fan',
        'Brush',
        'TV',
        'Fridge'
    ];

    return (
        <div style={{
            display: 'block', width: 500, padding: 30
        }}>
            <h4>ReactJS Blueprint TagInput Component</h4>
            <TagInput
                placeholder="Sample Tags"
                values={values}
            />
        </div>
    );
}

export default App;

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://blueprintjs.com/docs/#core/components/tag-input