https://github.com/tannerlinsley/use-react-hooks
Use hooks in classes in React 16.5+
https://github.com/tannerlinsley/use-react-hooks
hooks javascript react react-hooks
Last synced: about 1 year ago
JSON representation
Use hooks in classes in React 16.5+
- Host: GitHub
- URL: https://github.com/tannerlinsley/use-react-hooks
- Owner: tannerlinsley
- Created: 2018-11-06T19:00:52.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-11-23T19:56:04.000Z (over 7 years ago)
- Last Synced: 2025-03-30T01:36:08.848Z (about 1 year ago)
- Topics: hooks, javascript, react, react-hooks
- Language: JavaScript
- Homepage: https://codesandbox.io/s/wor3rxopv8
- Size: 156 KB
- Stars: 82
- Watchers: 5
- Forks: 4
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# use-react-hooks
`use-react-hooks` adds support for hooks in React v16.6!
- ✂️ Tiny (3kb and 200 LOC)
- ⛑ Safely reverse-engineered using class lifecycles
- 🛠 Provides a clean and clear upgrade path to 16.7 when ready.
## Demos
- [Codesandbox Example](https://codesandbox.io/s/wor3rxopv8)
- [Intro Video](https://www.youtube.com/watch?v=aYOVH7VY0Jc)
## Install
```bash
npm install --save use-react-hooks
# or
yarn add use-react-hooks
```
## Usage
To use hooks in a functional compoennt, wrap it in `useHooks` then use any hook you want!
```jsx
import React from "react";
import { useHooks, useState } from "use-react-hooks";
const App = useHooks(props => {
const [count, setCount] = useState(0);
return (
Count: {count}
setCount(old => old + 1)}>Increment
);
});
```
## Documentation
The following hooks are available as named exports from the `use-react-hooks` package and follow the official React Hooks API here: https://reactjs.org/docs/hooks-reference.html
- `useReducer`
- `useState`
- `useContext`
- `useMemo`
- `useCallback`
- `useEffect`
- `useRef`
- `useImperativeMethods`
- `useMutationEffect` _Note: currently identical to `useEffect`_
- `useLayoutEffect` _Note: currently identical to `useEffect`_
## Additional Hooks
The following hooks are also provided for convenience:
- `usePrevious` - Returns the previously rendered value you pass it
## License
MIT © [tannerlinsley](https://github.com/tannerlinsley)