@jimengio/jimo-hooks

Jimo React Hooks

Collection of some react hooks

Usage

Installation

yarn add @jimengio/jimo-hooks

Hooks

• useAsyncClick
• useDebounce
• useDebouncedCallback
• useDebouncedClick
• useDeepCompareCache
• useDeepEffect
• useInterval
• useLoadImg
• useMountedState
• useThrottle
• useThrottleFn
• useUnmount
• useUpdateEffect

useAsyncClick

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} />;
};

useDebounce

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

useDebouncedCallback

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

useDebouncedClick

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} />;
};

useDeepCompareCache

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]));

  // ...
};

useDeepEffect

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]);

  // ...
};

useInterval

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

  // ...
};

useMountedState

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);
  }, []);

  // ...
};

useLoadImg

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

useThrottle

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

  // ...
};

useThrottleFn

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

useUnmount

Unmount callback

option	type	default	explain
fn	function

import { useUnmount } from "@jimengio/jimo-hooks";

const Demo = () => {
  useUnmount(() => {
    console.log("Unmount");
  });

  // ...
};

useUpdateEffect

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]));

  // ...
};

Dependencies

• lodash.isequal
• use-debounce
• @react-cmpt/use-throttle

Dev

# build package
yarn build

# tests
yarn test

# lint
yarn lint

License

MIT