react-input-labels

React component to insert a list of tags/labels in an input element

Install

npm install --save react-input-labels

Usage

1 . Require react-input-labels after installation

import ReactInputLabels from 'react-input-labels';

2 . Add style css from module

import 'react-input-labels/dist/index.css'

3 . Include react-input-labels as in the following example

import React, { useState } from 'react'
import ReactInputLabels from 'react-input-labels'
import 'react-input-labels/dist/index.css'

const App = () => {
  const [value, setValue] = useState('')

  return <>
    <ReactInputLabels
      values={values}
      onChange={(vals: string[]) => setValues(vals)}
      placeholder="Inserisci testo"
      className="my-search-tags"
      itemClassName="my-tag"
      closeItemCmp={'x'}/>
}

Props

• values - control the current list of values
• onChange - subscribe to change events
• className - (optional) additional class applied to the component container
• itemClassName - (optional) additional class applied to each element
• placeholder - (optional) placeholder, the same char introduced in each element. If more than one char is present, only the first char will be considered

Controlled Props

You can control the value / onChange props (specify the current value of the control) by providing values for them.

License

MIT © [Mario Fornaroli](https://github.com/Mario Fornaroli)