Project: Mentions component Time provided: 2 hours Tech stack: React + Typescript Link to design: Design
Description
This is similar to the @-mentions in X/Twitter. The user can type any text in the input element but when user types @ then a select box should appear from which they can select an option and it should be displayed in input element. For example Hi @Luke Skywalker may the force be with you.. An onChange handler should be triggered with the input and the options selected, in a format of your choice.
Instructions:
- Implement as much as possible in the given time.
- Push your code to Github/Gitlab/ and send us the link.
- Please write us a note on what else you would do if you could spend more time.
What we look for:
- Thinking: Are you able to think through the flow and edge cases?
- Tests: How well is the code tested through unit/integration tests?
- Documentation: How can anyone new run this app locally and contribute to it?
- Code organisation: How are you organizing your components?
- Component Reusability: Ensure that mention component that you are creating is re-usable.
- Ensure that consumer of mention component can pass
onChangeandvalueprop to make it controlled.
- Ensure that consumer of mention component can pass
What we don’t look for:
- Custom select box: You need not implement a custom select box. You're welcome to use the native select box or your favorite library.
- Styling: It can look & feel very bare-bones, that's perfectly fine.
From where you can get data for options while triggering mention actions
- Use data present in data.json as raw data for mention component.
Happy coding! 💻