react-calendly-components

Lightweight React hooks and context for scheduling Calendly events through https://components.calforce.pro

Overview ✨

This small library provides a typed AppProvider and four hooks to interact with our event API:

• AppProvider — supplies clientId, eventTypeUuid, and optional rootUrl
• useEventType() — fetches event type details
• useTimezones() — fetches available timezones
• useAvailableTimes() — fetches availability for a timezone and date range
• useScheduleEvent() — schedules an event (creates a scheduled event)

Install 🚀

Using npm:

npm install react-calendly-components

Using pnpm:

pnpm add react-calendly-components

Quick Start ⚡️

Wrap your UI with AppProvider and use the hooks inside:

import React from 'react';
import { AppProvider, useEventType, useTimezones, useAvailableTimes } from 'react-calendly-components';

function Booking() {
  const { eventType, loading: etLoading } = useEventType();
  const { timezones, loading: tzLoading } = useTimezones();
  const { availableTimes, loading: atLoading, refetch } = useAvailableTimes({
    timezone: 'America/New_York',
    rangeStart: '2026-01-03',
    rangeEnd: '2026-02-03'
  });

  // render UI...
}

export default function App() {
  return (
    <AppProvider clientId="your-client-id" eventTypeUuid="your-event-uuid">
      <Booking />
    </AppProvider>
  );
}

Tip: set rootUrl on AppProvider to point to a local/staging API if needed. Default: https://components.calforce.pro

API Reference 🔍

AppProvider

Props:

• clientId: string — required
• eventTypeUuid: string — required
• rootUrl?: string — optional (defaults to https://components.calforce.pro)

Hooks

• useEventType() → { eventType: EventType | null, loading: boolean, errors: string[] | null, refetch: () => void }
• useTimezones() → { timezones: Timezone[] }
• useAvailableTimes({ timezone, rangeStart, rangeEnd }) → { availableTimes: Availability[], loading: boolean, errors: string[] | null, refetch: () => void }
• useScheduleEvent() → { scheduledEvent: ScheduledEventResponse | null, loading: boolean, errors: string[] | null, schedule: (payload: ScheduledEventRequest) => Promise<ScheduledEventResponse>, reset: () => void }