Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.npmjs.com/package/@orpc/react below:

@orpc/react - npm

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

• 🔗 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.
• 🔍 First-Class OpenTelemetry: Seamlessly integrate with OpenTelemetry for observability.
• ⚙️ Framework Integrations: Seamlessly integrate with TanStack Query (React, Vue, Solid, Svelte, Angular), 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.

You can find the full documentation here.

• @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/openapi: Generate OpenAPI specs and handle OpenAPI requests.
• @orpc/otel: OpenTelemetry integration for observability.
• @orpc/nest: Deeply integrate oRPC with NestJS.
• @orpc/react: Utilities for integrating oRPC with React and React Server Actions.
• @orpc/tanstack-query: TanStack Query integration.
• @orpc/vue-colada: Integration with Pinia Colada.
• @orpc/hey-api: Hey API integration.
• @orpc/zod: More schemas that Zod doesn't support yet.
• @orpc/valibot: OpenAPI spec generation from Valibot.
• @orpc/arktype: OpenAPI spec generation from ArkType.

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

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>
  )
}

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>
  )
}

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

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4