Skip to content
Some tiny examples using React hooks.
JavaScript HTML CSS
Branch: master
Clone or download
leahjlou Merge pull request #1 from snapwich/timer-cleanup-fix
only cleanup timer on mouse pressed
Latest commit faa23b5 Jun 25, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
public Initial commit from Create React App Jun 23, 2019
src only cleanup timer on mouse pressed Jun 24, 2019
.gitignore Initial commit from Create React App Jun 23, 2019
README.md Update README.md Jun 24, 2019
article.gif Add demo gifs Jun 24, 2019
login-form.gif Add demo gifs Jun 24, 2019
package.json Initial commit from Create React App Jun 23, 2019
timer.gif Add demo gifs Jun 24, 2019
yarn.lock Initial commit from Create React App Jun 23, 2019

README.md

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.

Examples

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

Timer

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

Article

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.