Guides

React integration

Use plain fetch against the widget API from Vite, CRA, or React Native Web—no official SDK required.

Custom hook pattern

Encapsulate loading and error state around GET /api/widget/availability (replace BASE_URL).

useAvailability example

import { useState, useEffect } from 'react'

const BASE_URL = 'https://YOUR_APP_URL'
const KEY = import.meta.env.VITE_BAAS_PUBLISHABLE_KEY

export function useAvailability(resourceId, startDate, endDate) {
  const [data, setData] = useState(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState(null)

  useEffect(() => {
    if (!resourceId || !startDate || !endDate) return
    const q = new URLSearchParams({
      key: KEY,
      resource_id: resourceId,
      start_date: startDate,
      end_date: endDate,
    })
    setLoading(true)
    fetch(`${BASE_URL}/api/widget/availability?${q}`)
      .then((r) => (r.ok ? r.json() : Promise.reject(new Error(r.statusText))))
      .then(setData)
      .catch(setError)
      .finally(() => setLoading(false))
  }, [resourceId, startDate, endDate])

  return { data, loading, error }
}

Creating bookings

POST JSON to /api/widget/booking with the publishable key in the header or body per Authentication. Handle redirect URLs returned for Mollie checkout when payments are enabled.