Skip to content

CodecoolGlobal/diligent-academy-react-ts6

Repository files navigation

Tasks Hooks

  • Create a custom hook that implements a simple timer. The hook should be configurable with a start time and interval. The hook should return the elapsed time in seconds and a function to stop the timer.

  • Create a custom hook to manage the state of a modal window. The hook should be able to open and close the modal and pass any arbitrary content to it.

  • Create a custom hook to provide drag and drop functionality for elements. The hook should be able to handle reordering elements in a list.

  • Create a custom hook to manage a context. The hook should be able to share data across different parts of the application without passing props to every component.

  • Create a custom hook to provide debounce and throttle functionality for functions.

  • Create a custom hook to automatically refresh data at a specified interval. It can be used for displaying live data (e.g., stock prices).

  • Create a custom hook that allows uploading images using an input field and displaying a preview immediately.

Tasks Context

  • Create a simple application that allows the user to switch between light and dark themes. The theme change should affect the entire application. Use the React Context API to manage the theme state.

  • Create a form where the user has to enter their name and email address. Validate the form using TypeScript. Use context to store the form data and manage the validation state.

  • Create a simple login form where the user can enter their username and password. Use the Context API to store the current login state and manage user data.

  • Create a simple e-commerce application where the user can add products to a cart. Use the Context API to store the cart contents and modify the cart.

  • Create an application that can show and hide a modal window. Use the Context API to manage the visibility of the window and to store any data passed to it.

  • Create a form where the user enters data. Use a form library (e.g., React Hook Form) to handle the form, and the Context API to store and validate the form data.

  • Extend the simple e-commerce application that automatically sets dark mode if it's nighttime according to the system settings. Use the useMediaQuery hook to check the system's dark mode setting, and the Context API to store the theme.

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published