react-awesome-tags-input

react-awesome-tags-input is a library for text that is small and easy to customize

Features

customize styles
small size
easy to use

Installation

You can use npm

npm i react-awesome-tags-input

or via Yarn

yarn add react-awesome-tags-input

Usage

Here’s a sample implementation

import { TagInput } from "react-awesome-tags-input";
import { useState } from "react";

function App() {
  const [tags, setTags] = useState([]);

  return (
    <div style={{ marginLeft: 200, marginTop: 40 }}>
      <TagInput
        inputStyle={{
          width: "400px"
        }}
        placeholder={"Click Enter to add tags"}
        tags={tags} setTags={setTags}
        closeButtonStyle={{ color: 'blue' }} />
    </div>
  );
}

export default App;

Result

Options

Option	Type	Default	Description
`tags`	`Array`	`[]`	An array of tags that are displayed as pre-selected.
`setTags`	`void`	`function`	for change the state
`inputStyle`	`style`	`style`	style for input form
`closeButtonStyle`	`style`	`style`	style for input close x
`tagstyle`	`style`	`style`	style for input content tags
`placeholder`	`placeholder`	`string`	place holder text

GitHub

View Github