use-transition-state

useTransition + useState = useTransitionState

Stats

StarsIssuesVersionUpdatedCreatedSize
use-transition-state
0.0.3a year agoa year agoMinified + gzip package size for use-transition-state in KB

Readme



👟
use-transition-state



useTransition + useState = useTransitionState

npm version npm downloads gzip size All Contributors

Announcement

This hook builds on top of React.useTransition to reduce the verbose of using in conjunction with React.useState. However, the React.useTransition comes from React v18 that isn't official released yet. Which means the hook is in experimental stage and API might be changed in the near future.

Requirement

To use use-transition-state, you must use react@18.0.0 or greater.

Installation

This package is distributed via npm.

$ yarn add use-transition-state
# or
$ npm install --save use-transition-state

Basic Usage

Here's the basic concept of how it rocks.

Before:

import { useState, useTransition } from "react";

const App = () => {
  const [searchQuery, setSearchQuery] = useState(null);
  const [isPending, startTransition] = useTransition({ timeoutMs: 500 });

  const handleInputChange = (e) => {
    startTransition(() => {
      setSearchQuery(getParsedData(e.target.value));
    });
  };

  return (
    <div>
      <input onChange={handleInputChange} />
      {isPending && "⏳ Loading..."}
      <div>{searchQuery || "🔍 Start search"}</div>
    </div>
  );
};

After:

import useTransitionState from "use-transition-state";

const App = () => {
  const [searchQuery, setSearchQuery, { isPending }] = useTransitionState(
    null,
    { timeoutMs: 500 }
  );

  const handleInputChange = (e) => {
    setSearchQuery(getParsedData(e.target.value));
  };

  return (
    <div>
      <input onChange={handleInputChange} />
      {isPending && "⏳ Loading..."}
      <div>{searchQuery || "🔍 Start search"}</div>
    </div>
  );
};

API

The DX of the hook is similar with React.useState. You can also access all the APIs of React.useTransition when needed.

const [
  state,
  setState, // A React dispatch function with `startTransition`
  {
    isPending,
    startTransition,
    setState, // A React dispatch function without `startTransition`
  },
] = useTransitionState(initialState, { timeoutMs });

Contributors ✨

Thanks goes to these wonderful people (emoji key):


Welly

🤔 💻 📖 🚇 🚧

This project follows the all-contributors specification. Contributions of any kind welcome!

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.