An auto complete component built with react and typescript. The component is built with the following features in mind:
- Suggestions after two characters [ uses include method of matching ]
- Highlighting of matched text
- Clear suggestions/listdrop on blur
- Clear suggestions/listdrop with the escape key
- Has debounce functionality
The diagram below shows the visualization of the state and transitions for the auto-complete component. State transitions are driven by events and they are finite.
Below is the state machine for the app. Interactive visualization can be viewed from xstate using the code below.
const machine = {
initial: 'idle',
states: {
idle: {
on: {
SEARCH: 'loading',
},
},
loading: {
on: {
SUCCESS: 'showlist',
ERROR: 'error',
},
},
showlist: {
on: {
SEARCH: 'loading',
CLEAR: 'idle',
SELECT_ITEM: 'idle',
},
},
error: {
on: {
SEARCH: 'loading',
},
},
},
};
Open http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying pages/index.tsx
. The page auto-updates as you edit the file.
Libraries I would have used for production ready app:
- Handle Styling and Basic UI components: Material UI / tailwindcss.
- API and network caching : useQuery / SWR
- Style the input, droplist, loading and error components
- Add Error boundary
- Add tests
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev