React Query Render State: This hook allows you to declaratively define components that will be rendered based on the data processing state.
 !NPM License !NPM Downloads
React Query Render State: This hook allows you to declaratively define components that will be rendered based on the data processing state.
The easiest way to install react-query-render-state is with npm.
``bash`
npm install react-query-render-state
Alternately, download the source.
`bash`
git clone https://github.com/stegano/react-query-render-state.git
The useQueryRenderState hook enables a declarative approach to display components based on data processing status.
`tsx
import { useQueryRenderState } from "react-query-render-state";
export const App = () => {
const { render, ...queryResult } = useQueryRenderState({
// ...useQuery optionsuseInfiniteQueryRenderState
// You can also use in the same way.
});
return render(
() =>
Idle
, // → renderIdleLoading..
, // → renderLoadingError. :(, ({error.message})
// → renderError
Demo: https://stackblitz.com/edit/stackblitz-starters-ccrgxa9cNote: ✨
react-query-render-state is made based on @tanstack/react-query and react-render-state`Thanks goes to these wonderful people (emoji key):
Yongwoo Jung 💻 🤔 |
This project follows the all-contributors specification. Contributions of any kind welcome!