Some tiny examples using React hooks.

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.

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.

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.

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.