salvoravida / React Universal Hooks
Licence: mit
🎉 React Universal Hooks : just use****** everywhere (Functional or Class Component). Support React DevTools!
Stars: ✭ 148
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Universal Hooks
use-bus
React hook to subscribe and dispatch events accros React components
Stars: ✭ 51 (-65.54%)
Mutual labels: hooks, hook
entangle
Global state management tool for react hooks inspired by RecoilJS and Jotai using proxies.
Stars: ✭ 26 (-82.43%)
Mutual labels: hooks, hook
useAudioPlayer
Custom React hook & context for controlling browser audio
Stars: ✭ 176 (+18.92%)
Mutual labels: hooks, hook
Radioactive State
☢ Make Your React App Truly Reactive!
Stars: ✭ 273 (+84.46%)
Mutual labels: hooks, hook
Fontmod
Simple hook tool to change Win32 program font.
Stars: ✭ 1,064 (+618.92%)
Mutual labels: hooks, hook
Webhook
webhook is a lightweight incoming webhook server to run shell commands
Stars: ✭ 7,201 (+4765.54%)
Mutual labels: hooks, hook
transition-hook
☄️ An extremely light-weight react transition animation hook which is simpler and easier to use than react-transition-group
Stars: ✭ 250 (+68.92%)
Mutual labels: hooks, hook
Swifthook
A library to hook methods in Swift and Objective-C.
Stars: ✭ 93 (-37.16%)
Mutual labels: hooks, hook
react-use-observer
Performant react hooks for WebApi Observers, useResizeObserver, useInteractionObserver, useMutationObserver
Stars: ✭ 19 (-87.16%)
Mutual labels: hooks, hook
rusty-hook
git hook manager, geared toward Rust projects
Stars: ✭ 93 (-37.16%)
Mutual labels: hooks, hook
use-scroll-direction
A simple, performant, and cross-browser hook for detecting scroll direction in your next react app.
Stars: ✭ 24 (-83.78%)
Mutual labels: hooks, hook
MouseInjectDetection
Simple method of checking whether or not mouse movement or buttons (<windows 10) are injected
Stars: ✭ 29 (-80.41%)
Mutual labels: hooks, hook
use-smooth-scroll
React hook which gives a smooth scrolling function.
Stars: ✭ 41 (-72.3%)
Mutual labels: hooks, hook
use-double-tap
React hook for handling double tap on mobile devices
Stars: ✭ 18 (-87.84%)
Mutual labels: hooks, hook
Use Onclickoutside
React hook for listening for clicks outside of an element.
Stars: ✭ 361 (+143.92%)
Mutual labels: hooks, hook
React Selector Hooks
Collection of hook-based memoized selector factories for declarations outside of render.
Stars: ✭ 84 (-43.24%)
Mutual labels: hooks, hook
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
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
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;
};
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
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
Currently supported api on Classes Component:
- useState
- useEffect
- useLayoutEffect
- useMemo
- useCallback
- useReducer
- useRef
- useContext
- useImperativeHandle
- useDebugValue
React Dev Tools
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'),
);
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
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].