React Query Render State

React Query Render State: This hook allows you to declaratively define components that will be rendered based on the data processing state.

Installation

The easiest way to install react-query-render-state is with npm.

npm install react-query-render-state

Alternately, download the source.

git clone https://github.com/stegano/react-query-render-state.git

Quick Start

The useQueryRenderState hook enables a declarative approach to display components based on data processing status.

import { useQueryRenderState } from "react-query-render-state";

export const App = () => {
  const { render, ...queryResult } = useQueryRenderState({
    // ...`useQuery` options
    // You can also use `useInfiniteQueryRenderState` in the same way.
  });

  return render(
    () => <p>Idle</p>,                             // → renderIdle
    () => <p>Loading..</p>,                        // → renderLoading
    (data) => <div>Success({data})</div>,          // → renderSuccess
    (error) => <p>Error. :(, ({error.message})</p> // → renderError
  );
};

Demo: https://stackblitz.com/edit/stackblitz-starters-ccrgxa9c

Note: ✨ react-query-render-state is made based on @tanstack/react-query and react-render-state

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Yongwoo Jung 💻 🤔

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