React
Questions that involve React
Medium
Feedback Stars
Create a feedback rating component that takes in a number of stars and outputs the corresponding star SVGs on the output window. When the user clicks ...
Easy
Countries List with Debounce
Debouncing is a method of preventing a function from being invoked too often, and instead of waiting a certain amount of time until it was last called...
Easy
useOutsideClick Custom Hook
useOutsideClick custom hook can be used to determine if a click event was triggered outside of the target element's boundary. Create a function called...
Easy
Job Feed
Create a Job Feed page where the latest job postings are fetched from the Hackernews API. On clicking the job posting, the user should be able to land...
Medium
Folder Structure
Given a data object resembling a folder structure, create a folder structure UI resembling that of VS code with appropriate functionalities.
Hard
Countdown Timer
A countdown timer has hours, minutes, and seconds that count down to 0 when started. In this problem, you are required to create a Countdown component...
Medium
Infinite Autoplay Slider
As seen on the TailwindCSS website, create a horizontal grid of moving cards that loop infinitely. When hovered over, the cards slow down and are clic...
Easy
useKeyPress Custom Hook
Keypress events are triggered whenever a user hits any of the keys on the keyboard and some action happens on the web application. Create a custom hoo...
Medium
Toasts And Notifications
Toasts are the small little notification messages that popup on front-end applications to notify the user of some current actions that have happened. ...
Easy
Select All Checkboxes
Given a `Select All` checkbox - toggle the children's checkboxes in such a way that when the `select all` button is clicked, all the boxes are checked...
Easy
Local Storage Custom Hook
Implement a custom hook to get and set values from and to Local Storage. A custom hook is a way (or rather a mechanism) to reuse stateful logic. State...
Easy
Full Screen Modal
A modal is an overlay screen that appears when the user performs some action on the website. For example, You must be familiar with a window popping o...
Medium
Lightbox Gallary
Create a minimal Lightbox Gallery. A lightbox gallery is an image gallery with many images lined up as tiles. Once a tile is clicked, a full-screen im...
Easy
Multiple Filters
Given a list of products and a list of filters, create a multi-filters buttons bar with a list of filters. If any of the filter is clicked, the list o...
Easy
Form Validation
Create a Form Component in React that renders out a list of input fields and validates them before finally submitting the form. Create the form from s...
Easy
Link Previewer
Create a Link Previewer component in React that takes in children prop, that, when hovered over, displays the link that was provided to the component ...
Easy
Typewriter Effect
A Typewriter Effect is something where a piece of text constructs itself with some milliseconds in delay. You will see the text getting generated from...
Hard
Command Palette
Create a Command Palette that opens up with Keyboard events like Command + K. In this problem, The command palette will have navigation links to which...
Easy
Insert Text In Document
Given a textarea and a document box, Insert the text in the document in such a way that it HIGHLIGHTS the text content which is most recently added to...