react-universal-hooks

React Universal Hooks : just use****** everywhere. Support React >= 16.8.0

Installation

Using npm:

$ npm install --save react-universal-hooks

Or yarn:

$ yarn add react-universal-hooks

Usage

just add one line import!

index.js

1import "react-universal-hooks";
2import React from 'react';
3import ReactDOM from 'react-dom';
4import App from './App';
5
6  ReactDOM.render(
7      <App />,
8    document.getElementById('root'),
9  );

Demo

https://codesandbox.io/s/jnnnw158j5

1import React, { useState, useContext } from "react";
2import { useWindowSize } from "./useWindowSize";
3
4const MyContext = React.createContext({ myLabel: "MyContextLabel" });
5
6const Functional = () => {
7  const [count, setCount] = useState(0);
8  const { width, height } = useWindowSize();
9  const { myLabel } = useContext(MyContext);
10  return (
11    <React.Fragment>
12      <p>{myLabel}</p>
13      <p>{"Functional windowSize : " + width + "x" + height}</p>
14      <p>{"Functional Counter " + count}</p>
15      <button onClick={() => setCount(c => c + 1)}>Functional Counter</button>
16    </React.Fragment>
17  );
18};
19
20class Component extends React.PureComponent {
21   constructor(props) {
22      super(props);
23      this.state = { /* your already existing business logic here */ };
24    }
25    componentDidMount (){ /* your already existing business logic here */}
26    componentDidUpdate (){ /* your already existing business logic here */}
27    componentUnmount (){ /* your already existing business logic here */} 
28  render() {
29    const [count, setCount] = useState(0);
30    const { width, height } = useWindowSize();
31    const { myLabel } = useContext(MyContext);
32    return (
33      <React.Fragment>
34        <p>{myLabel}</p>
35        <p>{"Component windowSize : " + width + "x" + height}</p>
36        <p>{"Component Counter " + count}</p>
37        <button onClick={() => setCount(c => c + 1)}>Component Counter</button>
38      </React.Fragment>
39    );
40  }
41}
42

useWindowSize.js (custom Hook example)

1import { useState, useEffect } from "react";
2
3export const useWindowSize = () => {
4  const [size, setSize] = useState({
5    width: window.innerWidth,
6    height: window.innerHeight
7  });
8
9  const handle = () => {
10    setSize({
11      width: window.innerWidth,
12      height: window.innerHeight
13    });
14  };
15
16  useEffect(() => {
17    window.addEventListener("resize", handle);
18    return () => {
19      window.removeEventListener("resize", handle);
20    };
21  }, []);
22
23  return size;
24};

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

1import { useCallback } from 'react';
2
3class MyComponent extends React.PureComponent {
4  render (){
5    //....
6  }
7}
8
9class Container extends React.PureComponent {
10  render (){
11    {this.props.arrayProp.map(el=>
12      <MyComponent key={el.id} onClick={useCallback( ()=> someAction(el.id) , [el.id])} /> 
13    )}
14  }
15}

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

1import { supportReactDevTools } from 'react-universal-hooks';
2import React from 'react';
3import ReactDOM from 'react-dom';
4import App from './App';
5
6supportReactDevTools ({ active: process.env!=="production" });
7
8  ReactDOM.render(
9      <App />,
10    document.getElementById('root'),
11  );

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.

License

MIT License.