Skip to content
Some tiny examples using React hooks.
JavaScript HTML CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
src only cleanup timer on mouse pressed Jun 24, 2019
.gitignore Initial commit from Create React App Jun 23, 2019 Update Jun 24, 2019
article.gif Add demo gifs Jun 24, 2019
package.json Initial commit from Create React App Jun 23, 2019
yarn.lock Initial commit from Create React App Jun 23, 2019

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.

You can’t perform that action at this time.