next-js-suggest-input v1.2.0

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

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