# react-universal-hooks [![npm version](https://img.shields.io/npm/v/react-universal-hooks.svg?style=flat)](https://www.npmjs.org/package/react-universal-hooks) React Universal Hooks : just use****** everywhere. Support React >= 16.8.0 Installation ----------- Using [npm](https://www.npmjs.com/): $ npm install --save react-universal-hooks Or [yarn](https://yarnpkg.com/): $ yarn add react-universal-hooks Usage ----- just add one line import! index.js ```javascript import "react-universal-hooks"; import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; ReactDOM.render( , document.getElementById('root'), ); ``` Demo --- https://codesandbox.io/s/jnnnw158j5 ```javascript 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 (

{myLabel}

{"Functional windowSize : " + width + "x" + height}

{"Functional Counter " + count}

); }; 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 (

{myLabel}

{"Component windowSize : " + width + "x" + height}

{"Component Counter " + count}

); } } ``` useWindowSize.js (custom Hook example) ```javascript 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; }; ``` ## Why Universal Hooks? * use a customHook in your Component/Functional, without refactor. * useMemo & useCallback make PureComponents 100% pure! (max performance!) ## Use Case : Make PureComponent 100% Pure ```javascript import { useCallback } from 'react'; class MyComponent extends React.PureComponent { render (){ //.... } } class Container extends React.PureComponent { render (){ {this.props.arrayProp.map(el=> someAction(el.id) , [el.id])} /> )} } } ``` ## Api Reference 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 ## React Dev Tools index.js ```javascript 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( , document.getElementById('root'), ); ``` ![universal hooks devtools](https://user-images.githubusercontent.com/20126259/67915182-8663df80-fb92-11e9-9805-52789a6adaa8.PNG) ## How it works under the hood ? https://github.com/salvoravida/react-class-hooks # Feedback Let me know what do you think about!
*Do you like it? Give a star to this project!* :D Contributors ------------ See [Contributors](https://github.com/salvoravida/react-universal-hooks/graphs/contributors). License ------- [MIT License](https://github.com/salvoravida/react-universal-hooks/blob/master/LICENSE.md).

react-universal-hooks

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Sick of boring JavaScript newsletters?

Downloads in past