This React component implements an auto-suggest chip input field with the following features:
- Clicking on the input field reveals a dynamic list of items.
- As you type, the list updates to display only matching items.
- Clicking on an item transforms it into a chip at the top, automatically adjusting the input field.
- Converted chips are removed from the list.
- Each chip includes an "X" icon for removal, returning the item to the list.
- Implementation follows clean code principles.
- Developed using TypeScript for enhanced type safety.
- Special handling when the input is blank:
- Pressing backspace highlights the last chip.
- A subsequent backspace press deletes the highlighted chip.
- Developed in React (CRA/NextJS) from scratch.
- Utilizes CSS solutions such as Tailwind CSS/SCSS for styling.
- Install dependencies:
npm install - Run the development server:
npm start - Access the component in your application and enjoy the intuitive auto-suggest chip input experience.
Feel free to explore the codebase and customize it according to your project requirements. Video of the Component: https://drive.google.com/file/d/1lVpBhTsorJHlf5_w9dLmIm5CDnZYaiHE/view