Skip to content
Related Articles

Related Articles

How to add Tag Input in NextJS ?

Improve Article
Save Article
Like Article
  • Last Updated : 21 Dec, 2021

In this article, we are going to learn how we can add Tag input in NextJS. NextJS is a React-based framework. It has the power to Develop beautiful Web applications for different platforms like Windows, Linux, and mac.

Approach: To add our tag input, we are going to use the react-tag-input-component package. The react-tag-input-component package helps us to integrate the tag input in our app. So first, we will install the react-tag-input-component package and then we will add a tag input on our homepage.

Create NextJS Application: You can create a new NextJs project using the below command:

npx create-next-app gfg

 

Install the required package: Now we will install the react-tag-input-component package using the below command:

npm i react-tag-input-component

Project Structure: It will look like this.

Adding the Tag Input: After installing the package, we can easily add a tag input on any page in our app. For this example, we are going to add a tag input to our homepage.

Add the below content in the index.js file:

Javascript




import React, { useState } from "react"
import { TagsInput } from "react-tag-input-component"
  
export default function TagInput(){
  const [selected, setSelected] = useState(["gfg"]);
  return (
    <div>
      <h1>NextJs Tag Input - GeeksforGeeks</h1>
      <div>
      <h1>Add Tags</h1>
      <pre>{JSON.stringify(selected)}</pre>
      <TagsInput
        value={selected}
        onChange={setSelected}
        name="tags"
        placeHolder="tags"
      />
      <em>Enter tags</em>
      </div>
    </div>
  );
};

Explanation: In the above example first, we are importing the TagsInput component and useState hook from react. Then we are using the useState hook to store the value of the tag. After that, we are adding our tags input using the installed package.

Steps to run the application: Run the below command in the terminal to run the app.

npm run dev

Output:

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!