Awesome Custom Tags Input For React

A good-looking and customizable tags input component for React.

How to use it:

1. Install & import.

# Yarn
$ yarn add react-awesome-tags-input

# NPM
$ npm i react-awesome-tags-input

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

2. Create the tags input.

function App() {
  const [tags, setTags] = useState([]);
  return (
    <div style={{ marginLeft: 200, marginTop: 40 }}>
      <TagInput
        inputStyle={{
          width: "420px"
        }}
        placeholder={"Click Enter to add tags"}
        tags={tags} setTags={setTags}
        closeButtonStyle={{ color: 'blue' }} />
    </div>
  );
}
export default App;

3. Available options to customize the tags input.

className="input-field"
style={inputStyle}
type="text"
value={inputValue}
onKeyDown={handleKeyDown}
onChange={(e) => setInputValue(e.target.value)}
placeholder={placeholder || "Type a tag and press Enter"}

Preview:

Download Details:

Author: zidniryi

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/zidniryi/react-awesome-tags-input

License: MIT