https://github.com/abhinandanmishra1/react-chips-component
React Chips Component
https://github.com/abhinandanmishra1/react-chips-component
react
Last synced: 3 months ago
JSON representation
React Chips Component
- Host: GitHub
- URL: https://github.com/abhinandanmishra1/react-chips-component
- Owner: abhinandanmishra1
- Created: 2024-01-16T10:03:18.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-01-16T16:42:57.000Z (over 1 year ago)
- Last Synced: 2024-01-16T21:20:36.847Z (over 1 year ago)
- Topics: react
- Language: TypeScript
- Homepage:
- Size: 32.2 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# See Live
[Click Here](https://react-chips-component.vercel.app/)
# Features
- When you click on the input field, a list of items will appear.
- As you type, the list should show only items that match what you're typing.
- Clicking on an item should turn it into a chip at the top, and the input field should adjust automatically. Once an item becomes a chip, it should no longer be in the list.
- Each chip has an "X" icon. Clicking it removes the chip and adds the item back to the list.
- When the input is blank and the user presses backspace, the last chip (for example, Nick Giannopoulos) should get highlighted and on again pressing backspace it should get deleted.
# Tech Stack
- React + TypeScript
- CSS
# Demo
[Screencast from 16-01-24 10:09:41 PM IST.webm](https://github.com/abhinandanmishra1/react-chips-component/assets/64205626/f5629ccb-c129-4591-9a95-b4b7c40fd927)