Description:
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:
