Skip to content

Courses
Tutorials
Practice
Contests

Next.js Tutorial
Next.js Components
Next.js Functions
Next.js Deployment
Next.js Projects
Next.js Routing
Next.js Styles
Next.js Server-Side Rendering
Next.js Environment Variables
Next.js Middleware
Next.js Typescript
Next.js Image Optimization
Next.js Data Fetching

How to add code input in React JS?

How to add Tag Input in Next.js ?

Last Updated : 25 Jul, 2024

Comments

Improve

Suggest changes

Like Article

Like

Report

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:

How to add code input in React JS?

I

imranalam21510

Improve

Article Tags :

JavaScript
Web Technologies
ReactJS
Next.js

Similar Reads

How to add Phone Input in Next.js ?

In this article, we are going to learn how we can add phone 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. ApproachTo add our phone input we are going to use the react-phone-input-2 pack

How to Add Tag Input in React Native ?

Tags are widely used for managing items or categories in UI. Adding a tag input feature in React Native allows users to dynamically add and remove tags, enhancing data organization and filtering in applications. In this article, we will see how we can add tag input in react native application. We ar

How to add code input in React JS?

In this article, we are going to learn how we can add Code Input in React JS. React is a front-end JavaScript library for constructing user interfaces or UI components. It is maintained by Facebook and a community of individual developers and companies. Approach to add code input: To incorporate our

How to add Slider in Next.js ?

Adding a slider in Next.js involves integrating a slider component, like react-range, managing its state using React hooks and applying styles for customization, enhancing user interaction and input precision in your application. ApproachTo add our Slider we are going to use the react-range package.

How to Add Tweets in Next.js ?

Adding tweets in Next.js involves using Twitter's embed feature or API to display tweets. You can embed tweets directly in components or fetch and display them using server-side rendering or client-side data fetching. In this article, we are going to learn how we can add Tweets in NextJs. ApproachTo

How to Add Star Rating in Next.js ?

We can add star rating in next.js application using NPM package or create a Star rating component with css styling and state management for interactivity, enhancing user feedback and engagement. In this article, we are going to learn how we can add Star Rating in NextJS. ApproachTo add our ratings w

How to add Testimonials in Next.js ?

In this article, we are going to learn how we can add the Testimonials 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. The linking of dynamic paths helps in rendering your NextJS components con

How to Add Stylesheet in Next.js ?

In Next.js, adding a stylesheet enhances your app's styling capabilities. Import CSS files directly in your components or pages using ES6 import syntax. Next.js optimizes and includes these styles in the build process, ensuring efficient and modular CSS management. In this post, we are going to lear

How to add ESLint in Next.js ?

ESLint is a popular linting tool for identifying and fixing issues in JavaScript code. Adding ESLint to your Next.js project ensures that your code follows best practices and maintains a consistent style. This enhances code quality, helps catch errors early, and makes the codebase easier to maintain

How to add Video Player in Next.js ?

Adding a video player in a Next.js application enhances the user experience by enabling video playback. The react-player library simplifies integrating various video sources such as YouTube, Vimeo, and local files. In this article, we are going to learn how we can add Video Player in NextJS.Â Approa

Corporate & Communications Address:

A-143, 7th Floor, Sovereign Corporate Tower, Sector- 136, Noida, Uttar Pradesh (201305)

Registered Address:

K 061, Tower K, Gulshan Vivante Apartment, Sector 137, Noida, Gautam Buddh Nagar, Uttar Pradesh, 201305

Advertise with us

Company
About Us
Legal
Privacy Policy
In Media
Contact Us
Advertise with us
GFG Corporate Solution
Placement Training Program

Languages
Python
Java
C++
PHP
GoLang
SQL
R Language
Android Tutorial
Tutorials Archive

DSA
Data Structures
Algorithms
DSA for Beginners
Basic DSA Problems
DSA Roadmap
Top 100 DSA Interview Problems
DSA Roadmap by Sandeep Jain
All Cheat Sheets

Data Science & ML
Data Science With Python
Data Science For Beginner
Machine Learning
ML Maths
Data Visualisation
Pandas
NumPy
NLP
Deep Learning

Web Technologies
HTML
CSS
JavaScript
TypeScript
ReactJS
NextJS
Bootstrap
Web Design

Python Tutorial
Python Programming Examples
Python Projects
Python Tkinter
Python Web Scraping
OpenCV Tutorial
Python Interview Question
Django

Computer Science
Operating Systems
Computer Network
Database Management System
Software Engineering
Digital Logic Design
Engineering Maths
Software Development
Software Testing

DevOps
Git
Linux
AWS
Docker
Kubernetes
Azure
GCP
DevOps Roadmap

System Design
High Level Design
Low Level Design
UML Diagrams
Interview Guide
Design Patterns
OOAD
System Design Bootcamp
Interview Questions

Inteview Preparation
Competitive Programming
Top DS or Algo for CP
Company-Wise Recruitment Process
Company-Wise Preparation
Aptitude Preparation
Puzzles

School Subjects
Mathematics
Physics
Chemistry
Biology
Social Science
English Grammar
Commerce
World GK

GeeksforGeeks Videos
DSA
Python
Java
C++
Web Development
Data Science
CS Subjects

@GeeksforGeeks, Sanchhaya Education Private Limited, All rights reserved

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy

Improvement

Suggest Changes

Help us improve. Share your suggestions to enhance the article. Contribute your expertise and make a difference in the GeeksforGeeks portal.

geeksforgeeks-suggest-icon

Create Improvement

Enhance the article with your expertise. Contribute to the GeeksforGeeks community and help create better learning resources for all.

geeksforgeeks-improvement-icon

Suggest Changes

min 4 words, max Words Limit:1000

Thank You!

Your suggestions are valuable to us.

What kind of Experience do you want to share?

Interview Experiences

Admission Experiences

Career Journeys

Work Experiences

Campus Experiences

Competitive Exam Experiences