react-labels-input

lables input use react

Usage no npm install needed!

<script type="module">
  import reactLabelsInput from 'https://cdn.skypack.dev/react-labels-input';
</script>

README

react-labels-input

react labels input

Installation

npm install react-labels-input --save

Usage

import React from 'react';
import LabelsInput from 'react-labels-input';

var data = ['apple', 'banana', 'cheery'];

function add(value, tags) {
  console.log('add', value);
  console.log('tags', tags);
}

function remove(value, tags) {
  console.log('remove', value);
  console.log('tags', tags);
}

React.render(
  <LabelsInput data={data} add={add} remove={remove} />,
  document.getElementById('app')
);

Props

LabelsInput.propTypes = {
  labels: PropTypes.array,
  add: PropTypes.func,
  remove: PropTypes.func,
  data: PropTypes.array,
  classPrefix: PropTypes.string
}
  • labels: default labels in input
  • data: typeahead data
  • add: trigger when added a label
  • remove: trigger when removed a label
  • classPrefix: className prefix

Development

gulp dev

Build

gulp build