react-field-tag
TypeScript icon, indicating that this package has built-in type declarations

0.0.2 • Public • Published

ReactFieldTag

React library for tag inputs

NPM JavaScript Style Guide

Install

npm install --save react-field-tag

Usage

import React from 'react'

import ReactFieldTag from 'react-field-tag'

/// add below line to use default styling
import 'react-field-tag/dist/index.css'

const App = () => {
  const [tags, setTags] = React.useState<Array<string>>([]);

  const onAdd = (tag: string) => {
    setTags([...tags, tag]);
  }

  const onDelete = (index: number) => {
    setTags(tags.filter((_, i) => i !== index));
  }

  return <ReactFieldTag tags={tags} onAdd={onAdd} onDelete={onDelete} />
}

export default App

Demo

Demo

Table of contents

StyleClasses

Type declaration

Name Type Description
root? string style class for the whole input and tag container
input? string style class for input
tags? string style class for tags container
tag? string style class for tag(s)

ReactFieldTagProps

Type declaration

Name Type Description Default
tags Array of string an array of tags -
delimiter? string determines a point at which the string separates into tags ,
classes? StyleClasses style classes for styling -
closeIcon? ReactElement element to be used as close icon x (close icon from icons8)
onAdd function a callback function called when a new tag is to be added -
onDelete function a callback function called on deleting a tag -

License

MIT © iamdipanshusingh

Install

npm i react-field-tag

DownloadsWeekly Downloads

1

Version

0.0.2

License

MIT

Unpacked Size

20 kB

Total Files

12

Last publish

Collaborators

  • iamdipanshus