React Hooks

Collection of some react hooks

Usage

Installation

yarn add @react-cmpt/hooks

Hooks

• useAsyncClick
• useDebounce
• useDebouncedCallback
• useDebouncedClick
• useDeepCompareCache
• useDeepEffect

useAsyncClick

Click event with loading

| option | type | default | explain | | --------- | -------- | ------- | -------------- | | asyncFunc | function | | async function |

import { useAsyncClick } from "@react-cmpt/hooks";

const asyncFn = async () => {
  // do something
};

const Demo = () => {
  const [clickEvent, loading] = useAsyncClick(asyncFn);

  return <Button loading={loading} click={clickEvent} />;
};

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 "@react-cmpt/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 "@react-cmpt/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 | 300 | useDebouncedCallbackArgs["delay"] | | options | Object | | useDebouncedCallbackArgs["options"] |

import { useDebouncedClick } from "@react-cmpt/hooks";

const asyncFn = async () => {
  // do something
};

const Demo = () => {
  const [clickEvent, loading] = useDebounceClick(asyncFn);

  return <Button loading={loading} click={clickEvent} />;
};

useDeepCompareCache

| option | type | default | explain | | ------ | ---- | ------- | ------- | | value | any | | |

import { useDeepCompareCache } from "@react-cmpt/hooks";

const obj1 = { a: 1, b: { b1: 2 } };
const obj2 = { a: 1, b: { b1: 2 } };

const Demo = () => {
  const obj = useDeepCompareCache(obj1);
  console.log(obj === obj1); // true
  console.log(obj === obj2); // true

  // ...
};

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 "@react-cmpt/hooks";

const Demo = ({ value: Object }) => {
  useDeepEffect(() => {
    // do something
  }, [value]);

  // ...
};

Dependencies

• lodash.isequal
• use-debounce

Dev

# build package
yarn build

# tests
yarn test

# lint
yarn lint

License

MIT