@orpc/react

Typesafe APIs Made Simple 🪄

oRPC is a powerful combination of RPC and OpenAPI, makes it easy to build APIs that are end-to-end type-safe and adhere to OpenAPI standards

---

Highlights

• 🔗 End-to-End Type Safety: Ensure type-safe inputs, outputs, and errors from client to server.
• 📘 First-Class OpenAPI: Built-in support that fully adheres to the OpenAPI standard.
• 📝 Contract-First Development: Optionally define your API contract before implementation.
• ⚙️ Framework Integrations: Seamlessly integrate with TanStack Query (React, Vue, Solid, Svelte), Pinia Colada, and more.
• 🚀 Server Actions: Fully compatible with React Server Actions on Next.js, TanStack Start, and other platforms.
• 🔠 Standard Schema Support: Works out of the box with Zod, Valibot, ArkType, and other schema validators.
• 🗃️ Native Types: Supports native types like Date, File, Blob, BigInt, URL, and more.
• ⏱️ Lazy Router: Enhance cold start times with our lazy routing feature.
• 📡 SSE & Streaming: Enjoy full type-safe support for SSE and streaming.
• 🌍 Multi-Runtime Support: Fast and lightweight on Cloudflare, Deno, Bun, Node.js, and beyond.
• 🔌 Extendability: Easily extend functionality with plugins, middleware, and interceptors.
• 🛡️ Reliability: Well-tested, TypeScript-based, production-ready, and MIT licensed.

Documentation

You can find the full documentation here.

Packages

• @orpc/contract: Build your API contract.
• @orpc/server: Build your API or implement API contract.
• @orpc/client: Consume your API on the client with type-safety.
• @orpc/nest: Deeply integrate oRPC with NestJS.
• @orpc/react: Utilities for integrating oRPC with React and React Server Actions.
• @orpc/react-query: Integration with React Query.
• @orpc/vue-query: Integration with Vue Query.
• @orpc/solid-query: Integration with Solid Query.
• @orpc/svelte-query: Integration with Svelte Query.
• @orpc/vue-colada: Integration with Pinia Colada.
• @orpc/openapi: Generate OpenAPI specs and handle OpenAPI requests.
• @orpc/zod: More schemas that Zod doesn't support yet.
• @orpc/valibot: OpenAPI spec generation from Valibot.
• @orpc/arktype: OpenAPI spec generation from ArkType.

@orpc/react

Provides utilities for integrating oRPC with React and React Server Actions. Read the documentation for more information.

useServerAction Hook

The useServerAction hook simplifies invoking server actions in React.

'use client'

import { isDefinedError, onError } from '@orpc/client'
import { useServerAction } from '@orpc/react'

export function MyComponent() {
  const { execute, data, error, status } = useServerAction(someAction, {
    interceptors: [
      onError((error) => {
        if (isDefinedError(error)) {
          console.error(error.data)
          //                   ^ Typed error data
        }
      }),
    ],
  })

  const action = async (form: FormData) => {
    const name = form.get('name') as string
    execute({ name })
  }

  return (
    <form action={action}>
      <input type="text" name="name" required />
      <button type="submit">Submit</button>
      {status === 'pending' && <p>Loading...</p>}
    </form>
  )
}

createFormAction Utility

Creates a form action that can be used in React forms and deserializes with bracket notation.

const dosomething = os
  .input(
    z.object({
      user: z.object({
        name: z.string(),
        age: z.coerce.number(),
      }),
    })
  )
  .handler(({ input }) => {
    console.log('Form action called!')
    console.log(input)
  })

export const redirectSomeWhereForm = createFormAction(dosomething, {
  interceptors: [
    onSuccess(async () => {
      redirect('/some-where')
    }),
  ],
})

export function MyComponent() {
  return (
    <form action={redirectSomeWhereForm}>
      <input type="text" name="user[name]" required />
      <input type="number" name="user[age]" required />
      <button type="submit">Submit</button>
    </form>
  )
}

Sponsors

License

Distributed under the MIT License. See LICENSE for more information.