Use hooks in classes in React 16.5+
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example use-react-hooks Nov 7, 2018
src
.babelrc
.editorconfig
.eslintrc Initial Commit 0.1.0 Nov 6, 2018
.gitattributes
.gitignore
.travis.yml
CHANGELOG.md
README.md Fixed a bug that prevented react-hot-loader from working correctly Nov 7, 2018
package.json
rollup.config.js
yarn.lock

README.md

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

Install

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!

import React from "react";
import { useHooks, useState } from "use-react-hooks";

const App = useHooks(props => {
  const [count, setCount] = useState(0);
  return (
    <div>
      Count: {count}
      <button onClick={() => setCount(old => old + 1)}>Increment</button>
    </div>
  );
});

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