@onbookr/react

React components for embedding Onbookr booking calendars into any React or Next.js application.

Installation

npm install @onbookr/react
# or
pnpm add @onbookr/react
# or
yarn add @onbookr/react

Quick Start

import { OnbookrEmbed } from '@onbookr/react'

export default function BookingPage() {
  return (
    <OnbookrEmbed
      username="janedoe"
      theme="light"
      onBookingSuccess={() => console.log('Booking confirmed!')}
    />
  )
}

Components

<OnbookrEmbed />

Renders the booking calendar as an inline iframe with auto-resize.

| Prop | Type | Default | Description | |------|------|---------|-------------| | username | string | — | Required. Host's Onbookr username. | | theme | 'light' \| 'dark' \| 'auto' | 'auto' | Widget color theme. | | accentColor | string | — | Custom accent color (CSS color value). | | hideHeader | boolean | false | Hide the host name header. | | hideBranding | boolean | false | Hide "Powered by Onbookr" branding. | | onReady | () => void | — | Fired when the widget finishes loading. | | onBookingSuccess | (data) => void | — | Fired on successful booking. | | onStepChange | (data) => void | — | Fired when the booking step changes. | | width | string \| number | '100%' | Width of the widget. | | minHeight | string \| number | '500px' | Minimum height. |

<OnbookrPopup />

Renders a button that opens the booking calendar in a modal overlay.

| Prop | Type | Default | Description | |------|------|---------|-------------| | username | string | — | Required. Host's Onbookr username. | | buttonText | string | 'Book a session' | Text for the trigger button. | | children | ReactNode | — | Custom trigger element. | | (all common props) | | | Same theme/callback props as OnbookrEmbed. |

<OnbookrInline />

Renders the booking calendar inline with fixed dimensions (no auto-resize).

| Prop | Type | Default | Description | |------|------|---------|-------------| | username | string | — | Required. Host's Onbookr username. | | width | string \| number | '100%' | Width. | | height | string \| number | '600px' | Height. | | (all common props) | | | Same theme/callback props as OnbookrEmbed. |

Hooks

useOnbookrEvents

Low-level hook for listening to widget iframe messages. Used internally by all components.

License

MIT