# @slicekit/react

React hooks for Slice commerce. Each data hook wraps a typed
[`@slicekit/core`](../core) fetcher in a TanStack Query with sensible query
keys, pagination, and cache invalidation, so storefronts and dashboards read
Slice data without hand-rolling fetch state.

## Installation

```bash
npm install @slicekit/react @tanstack/react-query wagmi viem
```

Requires a `QueryClientProvider` in the tree (and a wagmi config for the
wallet hooks).

## Quick Start

```tsx
import { useSlicerProducts } from "@slicekit/react"

export function Products({ slicerId }: { slicerId: number }) {
  const { items, hasNextPage, fetchNextPage } = useSlicerProducts({
    slicerId,
    include: { prices: true },
    limit: 24
  })
  return (
    <ul>
      {items.map((product) => (
        <li key={product.productId}>{product.name}</li>
      ))}
      {hasNextPage && <button onClick={fetchNextPage}>More</button>}
    </ul>
  )
}
```

## Hooks

- `useSlicerProducts` — a slicer's products with include flags and filters,
  returned as accumulated `items` with `fetchNextPage` pagination.
- `useSlicerProductsTableQuery` — the server-driven variant for tables: each
  page, filter, and sort change issues a new query.
- `usePrices` — live product pricing.
- `useSlicerOrders` — a slicer's orders with pagination and filters.
- `useSlicerWithdrawableFunds` — withdrawable balances for a slicer account.
- `useStoreMetadata` — store configuration and metadata.
- `usePosLocations` — point-of-sale locations.
- `useWalletQueue` — queue wallet calls and track their submission status.

## Pagination

Data hooks build on the exported `usePagination` utility: pages are fetched
through TanStack Query's infinite queries, merged by item key, and exposed as
`items`, `pagination`, `hasNextPage`, `isFetchingNextPage`, and
`fetchNextPage`. Server-rendered pages can seed it through `initialData`.

## TypeScript

The `include` narrowing from `@slicekit/core` flows through every hook: the
`items` element type only carries the relations the query requested. Domain
values (statuses, roles, sort keys) are unions from `@slicekit/commerce`.