Skip to main content

@feelrift/react

React SDK for the Rift Experiences API. Embed availability, reservations, and checkout — including Stripe Elements for paid events — with a small set of typed components and hooks.

Where to start​

  • Installation — install, peer dependencies, where to mount the provider, base-URL configuration.
  • Your first checkout — end-to-end happy path from event display to successful order, in one runnable example.

Guides​

How-to pages for cross-cutting concerns the reference docs don't cover in one place.

  • Error handling — RiftApiError, isRiftApiError(err, "code") narrowing, per-code extension shapes.
  • Server-side rendering — Next.js App Router, Astro islands, Vite SPA. What the SDK guarantees and how to hold it.
  • Securing the order-status token — closing the leak paths (history, Referer, server logs) when the post-checkout JWT rides Stripe's return_url.
  • Pricing and estimates — the wave-tier model, the greedy-fill breakdown, and the disclaimer the SDK surfaces by default.
  • Theming — CSS custom properties, the appearance prop, the dark token variant, and the wrapper's deliberate hands-off behaviour.

API reference​

One page per public symbol. Every reference page follows the same shape: intro → basic usage → reference table → examples → version history.

  • Components — the 9 React components every embed needs (<RiftProvider>, <RiftEvent>, <EventHeader>, <AvailabilityList>, <ReserveButton>, <ReservationSummary>, <Countdown>, <CaptchaWidget>, <CheckoutForm>).
  • Hooks — useCheckout and useOrderStatus. The rest of the hook surface (useConfig, useAvailability, useReservation, etc.) backs the components and is exported from @feelrift/react with full JSDoc.
  • Errors — RiftApiError class, every registered code, per-code typed extensions.

Looking for the HTTP API?​

This is the React SDK reference. For raw endpoint shapes, request/response schemas, and the OpenAPI spec, see the Experiences API docs.

The SDK is a typed wrapper around that API. Every component and hook maps to one or more endpoints; when the SDK doesn't cover a use case, drop down to createRiftClient(...) from @feelrift/react/client and call the typed methods directly.