@foreverchoi0706/query-case

A library for easily managing UI components based on React Query state.

Installation

npm install @foreverchoi0706/query-case

Usage

Basic Usage

import { QueryCase } from "@foreverchoi0706/query-case";

function TodoList() {
  const query = useQuery(getTodoList());

  return (
    <QueryCase
      query={query}
      render={(data) => (
        <ul>
          {data.map((todo) => (
            <li key={todo.id}>{todo.title}</li>
          ))}
        </ul>
      )}
    />
  );
}

Custom Loading/Error/Empty State

<QueryCase
  query={query}
  loadingCase={<div>Loading...</div>}
  errorCase={<div>An error occurred.</div>}
  emptyCase={<div>No data available.</div>}
  render={(data) => (
    <ul>
      {data.map((todo) => (
        <li key={todo.id}>{todo.title}</li>
      ))}
    </ul>
  )}
/>

Global Configuration

import { QueryCaseProvider } from "@foreverchoi0706/query-case";

function App() {
  return (
    <QueryCaseProvider
      loadingCase={<div>Loading...</div>}
      errorCase={<div>An error occurred.</div>}
      emptyCase={<div>No data available.</div>}
    >
      <TodoList />
    </QueryCaseProvider>
  );
}

Props

QueryCase

| Prop | Type | Description | |------|------|-------------| | query | UseQueryResult | The result object returned by React Query's useQuery | | render | (data: T) => ReactNode | Function to render the data | | loadingCase | ReactNode | Component to display while loading | | errorCase | ReactNode | Component to display when an error occurs | | emptyCase | ReactNode | Component to display when there is no data | | className | string | Default style class | | loadingClassName | string | Style class for loading state | | errorClassName | string | Style class for error state | | emptyClassName | string | Style class for empty state |

QueryCaseProvider

| Prop | Type | Description | |------|------|-------------| | loadingCase | ReactNode | Global loading component | | errorCase | ReactNode | Global error component | | emptyCase | ReactNode | Global empty state component | | className | string | Global default style class | | loadingClassName | string | Global loading style class | | errorClassName | string | Global error style class | | emptyClassName | string | Global empty state style class |