@jimengio/hooks NPM

React Hooks

Collection of some react hooks

Usage

Installation

yarn add @react-cmpt/hooks

Hooks

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

Dev

# build package
yarn build

# tests
yarn test

# lint
yarn lint

License

MIT

react hooks react-hooks

lodash.isequal use-debounce

@infinitebrahmanuniverse/nolb-_jim @everything-registry/sub-chunk-488 @zalastax/nolb-_jim

0.1.0-alpha

4 years ago