react-ts-tagsinput
TypeScript icon, indicating that this package has built-in type declarations

2.0.3 • Public • Published

react-ts-tagsinput

A simple and customizable React tags input component written in TypeScript.

Screenshot

Live Demo

Installation

Install the component using npm package manager:

npm i react-ts-tagsinput

Example

import React from "react";
import type { Tag } from 'react-ts-tagsinput';
import { TagsInput } from "react-ts-tagsinput";
// Import default styling (optional)
import 'react-ts-tagsinput/lib/defaultTheme.css';

export default function App() {

  const [tags, setTags] = React.useState<Array<Tag>>(["Tag 1", "Tag 2", "Tag 3", "Tag 4"]);

  const handleTagsChange = React.useCallback((updatedTags: Array<Tag>) => {
    setTags(updatedTags);
  }, []);
  
  return(
    <div className='app'>
      <TagsInput name="myTags" placeholder="Add a tag" value={tags} onChange={handleTagsChange} />
    </div>
  );
  
}

Documentation

Props

Prop Type Description Required Default
name string The name attribute of the input field. Yes -
type string The type of the input field. No text
placeholder string The placeholder of the input field. No Add a tag
value Array<Tag> The array of tags. Yes -
allowDuplicates boolean Whether to allow duplicate tags or not. No false
disabled boolean Whether the input field is disabled or not. No false
prepend string Text to prepend before each tag. Example: #. No -
max number Limit the maximum number of tags. Set -1 for no limit. No -1
addOnBlur boolean Whether to add the tag when the user presses tab on the input. No false
autoFocus boolean Whether to autofocus the inputfield on component mount. No false
hideSubmitButton boolean Whether to hide the submit button. No false
onChange Function
(newTags: Array<Tag>) => void
The callback function that is called whenever there is a change in the tags array. No -
inputProps Object
{[key: string]: unknown}
Use this prop to add extra attributes to the input field. No -
tagProps Object
{[key: string]: unknown}
Use this prop to add extra attributes to the 'tag' div. No -
formProps Object
{[key: string]: unknown}
Use this prop to add extra attributes to the form. No -
tagValidation Function
(tag: Tag) => boolean
The validation function to run after each form submit. Return false to prevent adding the tag. You can add any type of validation including regex. Simply pass your validation function to this prop. No () => true
tagFilter Function
(tag: Tag) => Tag
The filter function that lets you modify the tag just before it is added. For example, you can use this to remove all the whitespaces from the tag. No -

Changelog

https://github.com/nitishkgupta/react-ts-tagsinput/blob/master/CHANGELOG.md

Contributions

Open to feedback and contributions at nitishkgupta/react-ts-tagsinput.

Package Sidebar

Install

npm i react-ts-tagsinput

Weekly Downloads

3

Version

2.0.3

License

MIT

Unpacked Size

22.6 kB

Total Files

10

Last publish

Collaborators

  • nitishkgupta