@neat-tech/use v1.0.1

Installation

yarn add @neat-tech/use

Hooks

useAsyncAction

const App = () => {
  const [run, { loading, error, result }] = useAsyncAction(createPost);

  if (loading) return <div>loading...</div>;
  if (error) return <div>{error}</div>;
  if (result) return <div>{JSON.stringify(result)}</div>;

  return <div onClick={() => run({ text: 'abc' })}>create post</div>;
};

useHover

const App = () => {
  const { hovered, hoverProps } = useHover();

  return (
    <div
      style={{ background: 'pink', width: 100, height: 100 }}
      {...hoverProps}
    >
      {hovered ? 'hovered' : 'hover me'}
    </div>
  );
};

useFocus

const App = () => {
  const { focused, focusProps } = useFocus();

  return (
    <button
      style={{ background: 'pink', width: 100, height: 100 }}
      {...focusProps}
    >
      {focused ? 'focused' : 'focus me'}
    </button>
  );
};

useLoadingDebounced

const App = () => {
  const instantTask = async () => 10;
  const [run, { loading, error, result }] = useAsyncAction(instantTask);
  const loadingDebounced = useLoadingDebounced(loading);

  return (
    <div onClick={run}>
      {loading && 'loading'}
      {loadingDebounced && 'loadingDebounced'}
    </div>
  );
};