@kilfro/tags-input NPM

@kilfro/tags-input

This is a simple react component for inputting tags.

demo

Install

npm install --save @kilfro/tags-input

Usage

import React, { useState } from 'react'
import TagsInput from '@kilfro/tags-input'

const Example = () => {
  const [tags, setTags] = useState([])

  return(
    <TagsInput values={tags} onChange={setTags} />
  )
}

Props

Name	Type	Default	Description
values	array		List of values
onChange	function		Callback function to change values
TagItemWrapper	component		Custom wrapper for tags. More info
placeholder	string		Placeholder for input field
autoPasted	boolean	false	Automatically splitting pasted string to tags by splitter. More info
splitter	string	`' '`	String for autosplit long string to tags
inputStyle	object		Inline styles for input field
inputClassName	string		Class names for input field
tagsPosition	`'top' \\| 'bottom'`	`'bottom'`	Use to change position of tags list

Custom tag wrapper

You can use prop TagItemWrapper to change tag item wrapper. Your custom component has to implement two props:

children as tag values;
removeHandler as callback function to remove tag.

Example:

import React, { useState } from 'react'
import TagsInput from '@kilfro/tags-input'

const MyWrapper = ({ children, removeHandler }) => {
    const style = {
        margin: 5,
        backgroundColor: 'gray',
        fontWeight: 'bold',
        color: 'white',
    }

    return (
        <button style={style} onClick={removeHandler}>{children}</button>
    )
}

const Example = () => {
  const [tags, setTags] = useState([])

  return(
    <TagsInput 
      values={tags} 
      onChange={setTags} 
      TagItemWrapper={MyWrapper}
    />
  )
}

Pasting from the clipboard

If prop autoPasted is true, input will split pasted string and add new values automatically. You can also change splitter (by default this is space) using prop splitter.