React Hooks Examples
Some tiny examples using React hooks.
How to run
This project was bootstrapped with Create React App.
To run, clone the project, navigate to the project directory, and run:
http://localhost:3000 to view it in the browser.
Example #1: Login Form with
This component shows a basic way to use the
useState hook to manage local state for simple username and password inputs.
For comparison, there is also a
LoginFormClass component, which shows the same login form written as a Class component.
Example #2: Timer with
It's a timer that counts up in milliseconds. When the mouse is pressed, the timer pauses.
This component shows how to use
useEffect to set up and clean up a timer. It also uses a custom hook to subscribe to the pressed state of the mouse. The custom hook,
useMousePressed, is in
Example #3: Article with
It contains some content with a colorscheme determined by a theme, which you can choose from a dropdown above.
The theme lives in a React Context. At the top level
ArticleWrapper component, there's a Provider which sets and stores the current theme and provides a function to update it. The
Article components are rendered within the Provider, which both use the
useContext Hook to easily reference the current theme from the nearest Provider.