Nextjs React Tagsinput
-Pro Component
A simple plugin providing a Bootstrap user interface for managing tags.
Example
Copy
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.