dhruvin-booking-plugin

Reusable booking plugin built with React + Tailwind CSS (styles ship as compiled CSS).

Install

npm install dhruvin-booking-plugin@latest react react-dom

This package expects react + react-dom in the host app (peer dependencies).

If you previously installed an older version, upgrade to >= 1.0.6 (older builds could ship a Rolldown runtime shim that breaks in browser/Vite).

React usage (Vite / CRA / most bundlers)

You must import the stylesheet once (usually in your app entry):

import { BookingPlugin } from "dhruvin-booking-plugin";
import "dhruvin-booking-plugin/style.css";

export default function App() {
  return (
    <BookingPlugin
      settings={{
        videoGallery: {
          enabled: false,
          videos: [{ title: "Tour", url: "https://example.com/video.mp4" }],
        },
      }}
      api={{
        getStaff: async () => fetch("/api/staff").then((r) => r.json()),
        getServices: async () => fetch("/api/services").then((r) => r.json()),
        getTimeSlots: async (payload) =>
          fetch("/api/slots", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify(payload),
          }).then((r) => r.json()),
        createBooking: async (payload) =>
          fetch("/api/bookings", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify(payload),
          }).then((r) => r.json()),
      }}
    />
  );
}

Non-React embed (POS / legacy sites)

import { createBookingWidget } from "dhruvin-booking-plugin";
import "dhruvin-booking-plugin/style.css";

const destroy = createBookingWidget("#booking-root", {
  settings: { videoGallery: { enabled: false } },
});

// later
// destroy();

Next.js notes

• Import CSS from a Client Component (or app/layout.tsx if allowed by your setup).
• If you hit SSR issues, render the widget from a client-only boundary ("use client") or dynamic import with ssr: false.

Video gallery toggle

• settings.videoGallery.enabled === true: show carousel
• otherwise: hidden

Publish

npm run build
npm publish --access public