Nextjs React Tagsinput

A simple plugin providing a user interface for managing tags.

Styles

You will find the styles for this component in assets/scss/nextjs-material-dashboard-pro/plugins/_plugin-react-tagsinput.scss..

Example

react-tagsinput primary

import React from 'react';
// react component plugin for creating beatiful tags on an input
import TagsInput from "components/TagsInput/TagsInput.js";

const tagProps = { className: "react-tagsinput-tag primary" };

export default function TagsInput(){
  const [tags, setTags] = React.useState(["pizza", "pasta", "parmesan"]);

  const handleTags = regularTags => {
    setTags(regularTags);
  };
  return (
    <TagsInput
      value={tags}
      onChange={handleTags}
      tagProps={tagProps}
    />
  );
}

export default Tags;

react-tagsinput info

import React from 'react';
// react component plugin for creating beatiful tags on an input
import TagsInput from "components/TagsInput/TagsInput.js";

const tagProps = { className: "react-tagsinput-tag info" };

export default function TagsInput(){
  const [tags, setTags] = React.useState(["pizza", "pasta", "parmesan"]);

  const handleTags = regularTags => {
    setTags(regularTags);
  };
  return (
    <TagsInput
      value={tags}
      onChange={handleTags}
      tagProps={tagProps}
    />
  );
}

export default Tags;

react-tagsinput success

import React from 'react';
// react component plugin for creating beatiful tags on an input
import TagsInput from "components/TagsInput/TagsInput.js";

const tagProps = { className: "react-tagsinput-tag success" };

export default function TagsInput(){
  const [tags, setTags] = React.useState(["pizza", "pasta", "parmesan"]);

  const handleTags = regularTags => {
    setTags(regularTags);
  };
  return (
    <TagsInput
      value={tags}
      onChange={handleTags}
      tagProps={tagProps}
    />
  );
}

export default Tags;

react-tagsinput warning

import React from 'react';
// react component plugin for creating beatiful tags on an input
import TagsInput from "components/TagsInput/TagsInput.js";

const tagProps = { className: "react-tagsinput-tag warning" };

export default function TagsInput(){
  const [tags, setTags] = React.useState(["pizza", "pasta", "parmesan"]);

  const handleTags = regularTags => {
    setTags(regularTags);
  };
  return (
    <TagsInput
      value={tags}
      onChange={handleTags}
      tagProps={tagProps}
    />
  );
}

export default Tags;

react-tagsinput danger

import React from 'react';
// react component plugin for creating beatiful tags on an input
import TagsInput from "components/TagsInput/TagsInput.js";

const tagProps = { className: "react-tagsinput-tag danger" };

export default function TagsInput(){
  const [tags, setTags] = React.useState(["pizza", "pasta", "parmesan"]);

  const handleTags = regularTags => {
    setTags(regularTags);
  };
  return (
    <TagsInput
      value={tags}
      onChange={handleTags}
      tagProps={tagProps}
    />
  );
}

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.