Collection of some react hooks
![GitHub license](https://camo.githubusercontent.com/f73dfa7522e9f8f30c3a7f0e2e98bfb427664828f04dcb651cbc0ebdca1e6873/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6c6963656e73652f6a696d656e67696f2f6a696d6f2d686f6f6b73)
yarn add @jimengio/jimo-hooks
Click event with loading
option |
type |
default |
explain |
asyncFunc |
function |
|
async function |
initState |
Object |
{ loading: false } |
initial loading |
return |
type |
default |
explain |
callback |
function |
|
|
loading |
boolean |
|
|
error |
Error |
|
catch error |
import { useAsyncClick } from "@jimengio/jimo-hooks";
const asyncFn = async () => {
// do something
};
const Demo = ({ asyncFn }) => {
const { callback, loading } = useAsyncClick(asyncFn);
return <Button loading={loading} click={callback} />;
};
option |
type |
default |
explain |
value |
any |
|
|
delay |
number |
|
|
options |
Object |
|
|
options:
option |
type |
default |
explain |
maxWait |
number |
|
Describes the maximum time func is allowed to be delayed before it's invoked |
leading |
boolean |
|
This param will execute the function once immediately when called. Subsequent calls will be debounced until the timeout expires. |
equalityFn |
function |
|
Comparator function which shows if timeout should be started |
more options
import { useDebounce } from "@jimengio/jimo-hooks";
const Demo = () => {
const [text, setText] = useState("hello");
const [value] = useDebounce(text, 1000);
return (
<div>
<input
defaultValue={"hello"}
onChange={(e) => {
setText(e.target.value);
}}
/>
<p>Actual value: {text}</p>
<p>Debounce value: {value}</p>
</div>
);
};
option |
type |
default |
explain |
callback |
function |
|
|
delay |
number |
|
|
options |
Object |
|
|
import { useDebouncedCallback } from "@jimengio/jimo-hooks";
const Demo = () => {
const [value, setValue] = useState();
// Debounce callback
const [debouncedCallback] = useDebouncedCallback(
// function
(value) => {
setValue(value);
},
// delay in ms
1000
);
return (
<div>
<input onChange={(e) => debouncedCallback(e.target.value)} />
<p>Debounced value: {value}</p>
</div>
);
};
Click event with loading
and debounce
option |
type |
default |
explain |
asyncFunc |
function |
|
async function |
delay |
number |
0 |
useDebouncedCallbackArgs["delay"] |
options |
Object |
|
useDebouncedCallbackArgs["options"] |
return |
type |
default |
explain |
callback |
function |
|
|
loading |
boolean |
|
|
cancelDebouncedCallback |
function |
|
useDebouncedCallbackReturns["cancelDebouncedCallback"] |
callPending |
function |
|
useDebouncedCallbackReturns["callPending"] |
error |
Error |
|
catch error |
import { useDebouncedClick } from "@jimengio/jimo-hooks";
const asyncFn = async () => {
// do something
};
const Demo = ({ asyncFn }) => {
const { callback, loading } = useDebounceClick(asyncFn);
return <Button loading={loading} click={callback} />;
};
option |
type |
default |
explain |
value |
any |
|
|
import { useDeepCompareCache } from "@jimengio/jimo-hooks";
const obj1 = { a: 1, b: { b1: 2 } };
const obj2 = { a: 1, b: { b1: 2 } };
const Demo = () => {
const obj = useDeepCompareCache(obj1);
console.log(obj1 === obj2); // false
console.log(obj === obj1); // true
console.log(obj === obj2); // true
// ...
};
import { useDeepCompareCache } from "@jimengio/jimo-hooks";
const Demo = () => {
// Deep comparison React.useEffect
useEffect(() => {
// ...
}, useDeepCompareCache([A, B]));
// Deep comparison React.useCallback
const callback = useCallback(() => {
// ...
}, useDeepCompareCache([A, B]));
// ...
};
Deep comparison React.useEffect
option |
type |
default |
explain |
effect |
function |
|
Imperative function that can return a cleanup function |
deps |
Array |
|
If present, effect will only activate if the values in the list change. |
import { useDeepEffect } from "@jimengio/jimo-hooks";
const Demo = ({ value: Object }) => {
useDeepEffect(() => {
// do something
}, [value]);
// ...
};
Handle the setInterval timer function.
option |
type |
default |
explain |
fn |
function |
|
Handle function. (setInterval callback) |
delay |
number |
0 |
setInterval ms. |
return |
type |
default |
explain |
state |
idle , running |
idle |
Operating status. |
cancel |
function |
|
The clear timer function. |
run |
function |
|
Manual restart interval function. |
import { useInterval } from "@jimengio/jimo-hooks";
const Demo = () => {
const { state, cancel, run } = useInterval(() => {
console.log("hi");
}, 1000);
// ...
};
Check component mount state
option |
type |
default |
explain |
- |
- |
- |
- |
return |
type |
default |
explain |
callback |
function |
|
Get mount status |
import { useMountedState } from "@jimengio/jimo-hooks";
const Demo = () => {
const getMounted = useMountedState();
useEffect(() => {
setTimeout(() => {
if (getMounted()) {
// do...
}
}, 1000);
}, []);
// ...
};
Get image loading status
option |
type |
default |
explain |
src |
string |
|
<img /> src |
reqLoading |
boolean |
|
request loading |
className |
string |
|
|
style |
Object |
|
|
imgProps |
Object |
|
<img /> props |
return |
type |
default |
explain |
imgNode |
JSX.Element |
|
<img /> |
state |
loading , done , error , idle |
idle |
image state |
loading |
boolean |
|
|
isError |
boolean |
|
image errored |
import { useLoadImg } from "@jimengio/jimo-hooks";
const Demo = () => {
const { imgNode, loading } = useLoadImg({
src: "[PATH]/demo.jpg",
style: { width: "100%" },
});
return <div data-loading={loading}>{imgNode}</div>;
};
throttled value
option |
type |
default |
explain |
value |
any |
- |
The value to throttle. |
wait |
number |
0 |
The number of milliseconds to throttle invocations to. |
options |
leading |
boolean |
- |
Specify invoking on the leading edge of the timeout. |
return |
type |
explain |
value |
any |
Returns the new throttled value. |
import { useThrottle } from "@jimengio/jimo-hooks";
const Demo = ({ value }) => {
const tValue = useThrottle(value);
// ...
};
throttled function
option |
type |
default |
explain |
fn |
function |
- |
The function to throttle. |
wait |
number |
0 |
The number of milliseconds to throttle invocations to. |
options |
leading |
boolean |
- |
Specify invoking on the leading edge of the timeout. |
return |
type |
explain |
callback |
function |
The new throttled function. |
cancel |
function |
The clear timer function. |
callPending |
function |
The callback manually function. |
import { useThrottleFn } from "@jimengio/jimo-hooks";
const Demo = () => {
const { callback, cancel } = useThrottleFn(() => {
console.log("click");
});
return <button onClick={callback}>++</button>;
};
Unmount callback
option |
type |
default |
explain |
fn |
function |
|
|
import { useUnmount } from "@jimengio/jimo-hooks";
const Demo = () => {
useUnmount(() => {
console.log("Unmount");
});
// ...
};
React.useEffect cancel the first mount trigger
option |
type |
default |
explain |
effect |
function |
|
Imperative function that can return a cleanup function |
deps |
Array |
|
If present, effect will only activate if the values in the list change. |
import { useUpdateEffect, useDeepCompareCache } from "@jimengio/jimo-hooks";
const Demo = () => {
useUpdateEffect(() => {
console.log(value);
}, [value]);
// Deep comparison useUpdateEffect
useUpdateEffect(() => {
console.log(value);
}, useDeepCompareCache([value]));
// ...
};
# build package
yarn build
# tests
yarn test
# lint
yarn lint
MIT