@bailaya/react

A React component library and hooks for the BailaYa public API

Overview

@bailaya/react builds on top of @bailaya/core to provide:

• A BailayaProvider + useBailayaClient context
• React hooks for fetching all core data (with loading, error, data, and refetch)
• Components with sensible Tailwind defaults (and full styling slots)
• Full TypeScript support, including localized text & date formatting

Works with or without Tailwind. If you don’t use Tailwind, just override the class props (or use the render props) to apply your own styling.

Features

• Context + client (BailayaProvider + useBailayaClient)

• Hooks (all return { data, error, loading, refetch })

  • useStudioProfile(overrideId?)
  • useUserProfile(userId)
  • useInstructors(overrideId?)
  • useClasses(from?, overrideId?)
  • useClassesByType(typeName, from?, overrideId?)
  • useEvents(from?, overrideId?)

• Components (all props overridable)

  • <StudioProfileCard />
  • <UserProfileCard />
  • <InstructorList />
  • <ClassSchedule />
  • <ClassScheduleByType />
  • <EventSchedule />
  • <StudioDescription />

Installation

npm install @bailaya/react

or with Yarn:

yarn add @bailaya/react

Peer Dependencies

• "react": ">=17"
• "react-dom": ">=17"

Quick Start

First, wrap your app with BailayaProvider:

// App.tsx
import React from "react";
import { BailayaProvider } from "@bailaya/react";

export default function App() {
  return (
    <BailayaProvider config={{ studioId: "YOUR_STUDIO_ID" }}>
      {/* ...your app */}
    </BailayaProvider>
  );
}

Using a Hook

import React from "react";
import { useInstructors } from "@bailaya/react";

export function TeamSection() {
  const { data: instructors, loading, error, refetch } = useInstructors();

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <>
      <button onClick={refetch}>Refresh</button>
      <ul>
        {instructors?.map((i) => (
          <li key={i.id}>{i.name} {i.lastname}</li>
        ))}
      </ul>
    </>
  );
}

Using a Component

import React from "react";
import { StudioProfileCard } from "@bailaya/react";

export function Dashboard() {
  return (
    <div className="max-w-md mx-auto">
      <StudioProfileCard locale="en" />
    </div>
  );
}

API Reference

<BailayaProvider config>

Provides useBailayaClient() context.

• config.baseUrl?: string – override default API URL
• config.studioId?: string – default studio ID

Hooks

All hooks return:

{
  data: T | null;
  error: Error | null;
  loading: boolean;
  refetch: () => Promise<void>;
}

| Hook | Description | |--------------------------------------------------|--------------------------------------------------------------| | useStudioProfile(overrideId?) | Fetch a studio’s profile. | | useUserProfile(userId) | Fetch a user’s profile / bio. | | useInstructors(overrideId?) | Fetch list of active instructors (owner, admin, instructor). | | useClasses(from?, overrideId?) | Fetch next 7 days of classes (all types). | | useClassesByType(typeName, from?, overrideId?) | Fetch next 7 days of classes filtered by typeName. | | useEvents(from?, overrideId?) | Fetch next 7 days of events. |

Components

All components share:

• Override props for every styling slot
• locale (where relevant)
• labels object for custom text (e.g. instructor or business-hours labels)
• renderItem for full JSX override

| Component | Props | |---------------------------| --------------------------------------------------------------------------------------------------------------------------------- | | <StudioProfileCard /> | overrideId?, locale?, labels?, className?, nameClassName?, descriptionClassName?, labelClassName?, renderProfile? | | <UserProfileCard /> | userId, locale?, labels?, className?, nameClassName?, bioClassName?, renderProfile? | | <InstructorList /> | overrideId?, renderItem?, plus styling slots: className?, itemClassName?, imageWrapperClassName?, etc. | | <ClassSchedule /> | from?, overrideId?, locale?, labels?, renderItem?, plus slots: className?, itemClassName?, etc. | | <ClassScheduleByType /> | typeName, from?, overrideId?, locale?, labels?, renderItem?, plus same styling slots as <ClassSchedule />. | | <EventSchedule /> | from?, overrideId?, locale?, labels?, renderItem?, plus slots: className?, itemClassName?, etc. | | <StudioDescription /> | overrideId?, locale?, render?, plus styling slots: className?, paragraphClassName? |

License

ISC