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

| 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

| 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