Nextjs / React Tag Input With auto Suggest

Import Package

import NextTagInputProps from "next-js-suggest-input";

import CSS inside _app.js

import "next-js-suggest-input/build/react-tag-input.css"

Component props

Property	Type	Description
tags	State	useState
placeholder	string	Your Subject
maxTags	number	Total Number of tags
editable	boolean	true / false
readOnly	boolean	true / false
removeOnBackspace	boolean	true / false
suggestions	object	["Apple", "Mumbai", "Kolkata", "Banana"]
onChange	function<event>	onChange event handler for form elements
tagStyle	JSX Style Components	background: '#ff0000', color: '#fff', fontSize: '.85em'

Demo Example

const example = () => {

    const [tags, setTags] = useState([])
    const suggestions = ["Apple", "Air", "Asia", "Mumbai", "Kolkata", "Banana"]
    
    // tag style
    const TStyle = { background: '#ff0000', color: '#fff', fontSize: '.85em' };

    return(
        <>
         <NextTagInputProps
              tags={tags}
              placeholder="Your Subject"
              maxTags={10}
              editable={false}
              readOnly={false}
              removeOnBackspace={true}
              suggestions={suggestions}
              onChange={(newTags) => setTags(newTags)}
              tagStyle={TStyle}
          />
        </>
        )
}

export default example