react-universal-hooks - GitLite

KO | EN

gitlite — search

#javascript #python #hacktoberfest #typescript #llm #deep-learning #linux #java #windows #cli #awesome-list #vue #pytorch #mcp

react-universal-hooks

(★ 187)

:tada: React Universal Hooks : just use****** everywhere (Functional or Class Component). Support React DevTools!

File Explorer

Download Latest Version (.zip)

- index.esm.js
- index.js
- index.js
.eslintignore
.eslintrc.json
.gitignore
.npmignore
.prettierrc.js
CHANGELOG.md
LICENSE
package-lock.json
package.json
README.md
rollup.config.js

# Installation Guide

1. Get the code

git clone https://github.com/salvoravida/react-universal-hooks

Downloads the entire project code from GitHub to your computer.

cd react-universal-hooks

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

$ npm install --save react-universal-hooks

Downloads and installs the libraries listed in package.json.

$ yarn add react-universal-hooks

Type this command into your terminal and run it.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

Pulled directly from this repo's README.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 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(
      <App />,
    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 (
    <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)
```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=>
      <MyComponent key={el.id} onClick={useCallback( ()=> 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
<br/>
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(
      <App />,
    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! <br>
*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).