TagInput is a reusable React component that allows users to input and manage tags. It is designed to be easily integrated into your React applications. This README provides information on how to use the TagInput component in your project.
npm install tag-input-reactjsbash
npm install tag-input-reactjs
`
or
`bash
yarn add tag-input-reactjs
`
Usage
!image
Once you've installed the package, you can import the TagInput component into your React application and use it as follows:
`javascript
import React, { useState } from "react";
import TagInput from "tag-input-reactjs";
function YourComponent() {
const [tags, setTags] = useState({ yourTagType: [] });
return (
);
}
export default YourComponent;
`
Make sure to replace "yourTagType" with the appropriate tag type you want to manage.
Example
Check out the live example here.
Props
The TagInput component accepts the following props:
- tags (object): An object that contains the tags to be displayed and managed. The structure should be { [tagType]: [tags] }.
- name (string): The type of tags to manage. This should correspond to the key in the tags object.
- setTags (function): A function to update the tags when they are modified. It should accept the updated tags in the same format as the tags prop.
- error (boolean, optional): A boolean value that can be used to indicate an error state. If set to true, the component will display a red border.
Functionality
The TagInput component provides the following functionality:
- Tags can be added by typing text in the input field and pressing Enter or by separating tags with a comma.
- Existing tags can be removed by clicking the "×" button next to the tag.
- The component can display an optional error state with a red border when the error prop is set to true`.