❤
npm
Sign UpSign In

@jimengio/jimo-hooks
TypeScript icon, indicating that this package has built-in type declarations

0.4.0 • Public • Published

Jimo React Hooks

Collection of some react hooks

CI npm GitHub license

Usage

Installation

yarn add @jimengio/jimo-hooks

Hooks

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

Dev

# build package
yarn build

# tests
yarn test

# lint
yarn lint

License

MIT

Readme

Keywords

Package Sidebar

Install

npm i @jimengio/jimo-hooks

Repository

github.com/jimengio/jimo-hooks

Homepage

github.com/jimengio/jimo-hooks#readme

Weekly Downloads

1

Version

0.4.0

License

MIT

Unpacked Size

61.4 kB

Total Files

60

Last publish

Collaborators

  • imzshh
  • jiyinyiyong
  • rebirth
Try on RunKit
Report malware