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