https://github.com/adeelibr/react-hooks-demo
A react hooks demo, inspired by Dan Abramov Demo in React Conf 2018
https://github.com/adeelibr/react-hooks-demo
react react-context react-hooks usecontext useeffect usestate
Last synced: 26 days ago
JSON representation
A react hooks demo, inspired by Dan Abramov Demo in React Conf 2018
- Host: GitHub
- URL: https://github.com/adeelibr/react-hooks-demo
- Owner: adeelibr
- Created: 2018-10-28T16:35:32.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2019-10-15T21:46:26.000Z (over 5 years ago)
- Last Synced: 2025-04-01T05:51:14.447Z (2 months ago)
- Topics: react, react-context, react-hooks, usecontext, useeffect, usestate
- Language: JavaScript
- Size: 307 KB
- Stars: 49
- Watchers: 1
- Forks: 18
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Documentation
### Starter Kit
The demo uses starter kit https://github.com/adeelibr/react-starter-kit
### Demo Includes
* Example of useState
* Example of useEffect
* Example of useContext
* Example of custom hooks
* custom hook useWindowWidth
* custom hook useDocumentTitle
* custom hook useFormInput
* Example of useReducer
* Examples of useSpring (react-spring) hooks
* Progress bar example
* Fade example
### How to run
```
$ yarn
$ yarn start // development
$ yarn build // production build
```
### How to use
In `src/index.js`
There is an object called `const VISIBLE = {};` with a list of all examples, all you have to do is, to see a particular example. Let's say you want to see `react-spring` examples of hooks, do the following in your `App` state
```
state = {
isVisible: [
VISIBLE.IS_REACT_SPRING_1_VISIBLE,
VISIBLE.IS_REACT_SPRING_2_VISIBLE,
],
};
```
And that's pretty much it, just add a `VISIBLE.SOME_EXMAPLE` to your `isVisible` state array, your app will hot reload with the new UI information.