@jimengio/jimo-hooks v0.4.0

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

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

options:

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

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

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

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

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

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

  // ...
};

useInterval

Handle the setInterval timer function.

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

const Demo = () => {
  const { state, cancel, run } = useInterval(() => {
    console.log("hi");
  }, 1000);

  // ...
};

useMountedState

Check component mount state

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

const Demo = () => {
  const getMounted = useMountedState();

  useEffect(() => {
    setTimeout(() => {
      if (getMounted()) {
        // do...
      }
    }, 1000);
  }, []);

  // ...
};

useLoadImg

Get image loading status

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

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

const Demo = ({ value }) => {
  const tValue = useThrottle(value);

  // ...
};

useThrottleFn

throttled function

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

const Demo = () => {
  const { callback, cancel } = useThrottleFn(() => {
    console.log("click");
  });

  return <button onClick={callback}>++</button>;
};

useUnmount

Unmount callback

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

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

  // ...
};

useUpdateEffect

React.useEffect cancel the first mount trigger

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