Custom States

Custom Empty State

Customize the empty state shown when data is an empty array:

typescript

<UIStates
  data={items}
  loading={loading}
  emptyState={
    <div className="text-center py-12">
      <h3 className="text-lg font-semibold">No items yet</h3>
      <p className="text-gray-500">Get started by creating your first item.</p>
      <button className="mt-4 px-4 py-2 bg-blue-500 text-white rounded">
        Create Item
      </button>
    </div>
  }
>
  {items.map(item => (
    <div key={item.id}>{item.name}</div>
  ))}
</UIStates>

Custom Empty Check

Customize when to show the empty state using emptyCheck:

typescript

<UIStates
  data={data}
  loading={loading}
  emptyCheck={(data) => !data || data.length === 0}
  emptyState={<div>No results</div>}
>
  {data.map(item => (
    <div key={item.id}>{item.name}</div>
  ))}
</UIStates>

// Or check nested data
<UIStates
  data={response}
  loading={loading}
  emptyCheck={(data) => !data?.items?.length}
>
  {response.items.map(item => (
    <div key={item.id}>{item.name}</div>
  ))}
</UIStates>

Custom Error State

Provide a custom error state as a React node:

typescript

<UIStates
  data={data}
  loading={loading}
  error={error}
  errorState={
    <div className="text-center py-12">
      <div className="text-red-500 text-4xl mb-4">⚠️</div>
      <h3 className="text-lg font-semibold">Something went wrong</h3>
      <p className="text-gray-500 mt-2">
        We couldn't load your data. Please try again.
      </p>
    </div>
  }
>
  <div>{data.title}</div>
</UIStates>

Error State with Retry

Use a render function to access the error object and retry callback:

typescript

<UIStates
  query={query}
  errorState={(error, retry) => (
    <div className="text-center py-12">
      <h3 className="text-lg font-semibold text-red-600">
        Error: {error.message}
      </h3>
      <p className="text-gray-500 mt-2">
        Status: {error.response?.status}
      </p>
      <button
        onClick={retry}
        className="mt-4 px-4 py-2 bg-blue-500 text-white rounded"
      >
        Try Again
      </button>
    </div>
  )}
>
  <div>{query.data.title}</div>
</UIStates>

Combining Custom States

typescript

function ProductList() {
  const query = useQuery({
    queryKey: ["products"],
    queryFn: fetchProducts,
  });

  return (
    <UIStates
      query={query}
      emptyState={
        <div className="text-center py-12">
          <p className="text-gray-500">No products available</p>
          <button className="mt-4 btn-primary">
            Browse Catalog
          </button>
        </div>
      }
      errorState={(error, retry) => (
        <div className="text-center py-12">
          <h3 className="text-red-600">Failed to load products</h3>
          <p className="text-sm text-gray-500">{error.message}</p>
          <button onClick={retry} className="mt-4 btn-secondary">
            Retry
          </button>
        </div>
      )}
    >
      {query.data.map(product => (
        <ProductCard key={product.id} product={product} />
      ))}
    </UIStates>
  );
}

TanStack Query Integration Skeleton Caching