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:

npm start

Open http://localhost:3000 to view it in the browser.


Example #1: Login Form with useState

Login Form

The LoginForm component is found in src/login-form.

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 useEffect


The Timer component is found in src/timer.

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 custom-hooks/mouse-pressed.js.

Example #3: Article with useContext


The ArticleWrapper component is found in src/article.

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 ThemeSwitcher and Article components are rendered within the Provider, which both use the useContext Hook to easily reference the current theme from the nearest Provider.