React Universal Hooks : just use****** everywhere. Support React >= 16.8.0
Using npm:
$ npm install --save react-universal-hooks Or yarn:
$ yarn add react-universal-hooks just add one line import!
index.js
import "react-universal-hooks"; import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; ReactDOM.render( <App />, document.getElementById('root'), );https://codesandbox.io/s/jnnnw158j5
import React, { useState, useContext } from "react"; import { useWindowSize } from "./useWindowSize"; const MyContext = React.createContext({ myLabel: "MyContextLabel" }); const Functional = () => { const [count, setCount] = useState(0); const { width, height } = useWindowSize(); const { myLabel } = useContext(MyContext); return ( <React.Fragment> <p>{myLabel}</p> <p>{"Functional windowSize : " + width + "x" + height}</p> <p>{"Functional Counter " + count}</p> <button onClick={() => setCount(c => c + 1)}>Functional Counter</button> </React.Fragment> ); }; class Component extends React.PureComponent { constructor(props) { super(props); this.state = { /* your already existing business logic here */ }; } componentDidMount (){ /* your already existing business logic here */} componentDidUpdate (){ /* your already existing business logic here */} componentUnmount (){ /* your already existing business logic here */} render() { const [count, setCount] = useState(0); const { width, height } = useWindowSize(); const { myLabel } = useContext(MyContext); return ( <React.Fragment> <p>{myLabel}</p> <p>{"Component windowSize : " + width + "x" + height}</p> <p>{"Component Counter " + count}</p> <button onClick={() => setCount(c => c + 1)}>Component Counter</button> </React.Fragment> ); } }useWindowSize.js (custom Hook example)
import { useState, useEffect } from "react"; export const useWindowSize = () => { const [size, setSize] = useState({ width: window.innerWidth, height: window.innerHeight }); const handle = () => { setSize({ width: window.innerWidth, height: window.innerHeight }); }; useEffect(() => { window.addEventListener("resize", handle); return () => { window.removeEventListener("resize", handle); }; }, []); return size; };- use a customHook in your Component/Functional, without refactor.
- useMemo & useCallback make PureComponents 100% pure! (max performance!)
import { useCallback } from 'react'; class MyComponent extends React.PureComponent { render (){ //.... } } class Container extends React.PureComponent { render (){ {this.props.arrayProp.map(el=> <MyComponent key={el.id} onClick={useCallback( ()=> someAction(el.id) , [el.id])} /> )} } }Api Reference are the same as official ones, so you can see api reference @ https://reactjs.org/docs/hooks-reference.html
Currently supported api on Classes Component:
- useState
- useEffect
- useLayoutEffect
- useMemo
- useCallback
- useReducer
- useRef
- useContext
- useImperativeHandle
- useDebugValue
index.js
import { supportReactDevTools } from 'react-universal-hooks'; import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; supportReactDevTools ({ active: process.env!=="production" }); ReactDOM.render( <App />, document.getElementById('root'), );
https://github.com/salvoravida/react-class-hooks
Let me know what do you think about!
Do you like it? Give a star to this project! :D
See Contributors.