https://github.com/srinivas6303/input_tags
A simple and reusable tag input component built with React and Redux Toolkit. It allows users to dynamically add and remove tags using keyboard interactions (Enter or ,).
https://github.com/srinivas6303/input_tags
css react redux-toolkit state-management usedispatch useselector
Last synced: about 2 months ago
JSON representation
A simple and reusable tag input component built with React and Redux Toolkit. It allows users to dynamically add and remove tags using keyboard interactions (Enter or ,).
- Host: GitHub
- URL: https://github.com/srinivas6303/input_tags
- Owner: srinivas6303
- Created: 2025-08-01T16:23:46.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2025-10-06T12:42:16.000Z (9 months ago)
- Last Synced: 2025-10-06T14:37:28.727Z (9 months ago)
- Topics: css, react, redux-toolkit, state-management, usedispatch, useselector
- Language: JavaScript
- Homepage:
- Size: 1.49 MB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🏷️ Tag Component with React & Redux
A simple and reusable tag input component built with **React** and **Redux Toolkit**. It allows users to dynamically add and remove tags using keyboard interactions (`Enter` or `,`).
---
## 🚀 Features
- Add tags by pressing `Enter` or `,`
- Remove tags with a single click (`X`)
- Input auto-clears after adding a tag
- State management with Redux Toolkit
---
## 🛠️ Tech Stack
- **React** (Hooks)
- **Redux Toolkit**
- **CSS** (Custom styling)
---
## ⚙️ Installation & Usage
```bash
# 1. Clone the repo
git clone https://github.com/yourusername/tag-component.git
cd tag-component
# 2. Install dependencies
npm install
# 3. Start the Vite development server
npm run dev
```
## 🔑 How It Works
- Tags are stored in Redux (tagSlice)
- On key press (Enter or Comma), tag gets added
- Clicking X dispatches a remove action
## Resource
link: https://docs.google.com/document/d/1RLm7Q_iSxMfEYSsNTBzSmzjH1tPEshMgJBRpFQdMiy0/edit?usp=sharing
https://github.com/user-attachments/assets/5be51df0-5540-4138-b1b6-662df27a204b