Material-UI React Tagsinput

-
Pro Component

A simple plugin providing a Bootstrap user interface for managing tags.


Example

import React from "react";
// react plugin that creates an input with badges
import TagsInput from "components/TagsInput/TagsInput.js";

const tagProps = { className: "tag badge mr-1" };

const inputProps = {
  className: "",
  placeholder: ""
};

class Tags extends React.Component {
  state = {
    tagsinput: ["Bucharest", "Cluj", "Iasi", "Timisoara", "Piatra Neamt"]
  };
  handleTagsinput = tagsinput => {
    this.setState({ tagsinput });
  };
  render() {
    return (
      <>
        <TagsInput
          className="bootstrap-tagsinput"
          onChange={this.handleTagsinput}
          tagProps={tagProps}
          value={this.state.tagsinput}
          inputProps={inputProps}
        />
      </>
    );
  }
}

export default Tags;

Props

If you want to see more examples and properties please check the official react-tagsinput Documentation.

You can also check the Official React-Chartist Github Repository.