React
Contract Kit has optional React integrations for server state, URL state, and forms. Each package is independent, so install only the pieces your app needs.
| Package | Use it for |
|---|---|
@contract-kit/react-query | Typed TanStack Query options, mutations, prefetching, and query keys |
@contract-kit/nuqs | URL-backed search, filters, tabs, sorting, and pagination |
@contract-kit/react-hook-form | Typed React Hook Form setup from a contract body schema |
Recommended flow
Use React Query for data fetching and mutations. It uses the client's throwing call() path because TanStack Query already models failed requests through its error channel.
Use nuqs when route query parameters are part of the user experience. It keeps URL state and contract query input aligned.
Use React Hook Form when a form submits to a contract with a body schema. It reuses the same schema for client-side validation.
Install
bun add @contract-kit/react-query @tanstack/react-query
bun add @contract-kit/nuqs nuqs
bun add @contract-kit/react-hook-form react-hook-form @hookform/resolvers