InteractiveChipSelector is a dynamic and interactive input rendering tool developed using Vite, React, TypeScript, and Tailwind CSS. It enables users to efficiently select and display items as chips through a user-friendly interface.
- Dynamic Filtering: As you type in the input field, a list of matching items is dynamically filtered and displayed.
- Interactive Selection: Clicking on an item in the filtered list turns it into a chip at the top of the input field.
- Automatic Adjustment: The input field adjusts automatically as items are selected, ensuring a seamless user experience.
- Chip Removal: Each chip includes an "X" icon for removal. Clicking the icon removes the chip and adds the item back to the list.
- Backspace Deletion Functionality: Pressing backspace on an empty search field highlights the latest chip. Pressing backspace again deletes the highlighted chip.
- Keyboard Shortcuts: Convenient keyboard shortcuts enhance usability, including:
Escto quit searching- Arrow keys for navigation within the search results
Enterto select an itemBackspacefunctionality for managing chips
- User-Friendly Interface: Intuitive user interface design ensures ease of use for both novice and experienced users.
- Built from Scratch: Every component is built from scratch in React without using any external component libraries like MUI.
Interactive.Chip.Selector.Demo.Video.mp4
To run this project, you need to have the following dependencies installed:
-
Clone this repository to your local machine.
-
Install the project dependencies using Yarn (Recommended):
yarn install
OR
You can also use npm:
npm install
During development, start the development using the following command:
yarn dev
OR (Using npm)
npm run dev
To build the app, use the following command:
yarn build
OR (Using npm)
npm run build