d

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.

15 St Margarets, NY 10033
(+381) 11 123 4567
ouroffice@aware.com

 

KMF

Suspense-like Transitions In React – use-transition

Suspense like transitions without experimental react features today. For any fetching library.

It caches the previous result in case a transition occurs and only shows some kind of loading indicator after a certain threshold (by default 300ms) has been reached without the new data arriving.

The concept is taken from the experimental React.useTransition which is not stable as today and only available as an experimental build. This hook however works without React concurrent mode.

How to use it:

1. Install and import the hook.

# NPM
$ npm i @n1ru4l/react-use-transition
import * as React from "react";
import { unstable_batchedUpdates } from "react-dom";
import { createUseTransition } from "@n1ru4l/react-use-transition";
import { useQuery } from "your-fetching-library";

2. Basic usage.

const useTransition = createUseTransition(unstable_batchedUpdates);
const DataFetchingComponent = ({ postId }) => {
  const { data, isLoading } = useQuery("/foo/:postId", { postId });
  const [cachedData, showLoadingIndicator] = useTransition(data, isLoading);
  return (
    <>
      {showLoadingIndicator ? <Spinner /> : null}
      {cachedData ? (
        cachedData.error ? (
          <ErrorRenderer error={cachedData.error} />
        ) : (
          <PostRenderer post={cachedData.post} />
        )
      ) : null}
    </>
  );
};

Preview:

Download Details:

Author: n1ru4l

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/n1ru4l/react-use-transition

License: MIT

Credit: Source link

Previous Next
Close
Test Caption
Test Description goes like this