@slicekit/react

React hooks for Slice commerce. Each data hook wraps a typed @slicekit/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

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

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.