Skip to main content

React SDK

@bailaya/react provides hooks and ready-to-render components for React 17+.

Installation​

npm install @bailaya/react @bailaya/core

Setup​

Wrap your app (or the subtree that needs BailaYa data) with BailayaProvider:

import { BailayaProvider } from '@bailaya/react';

export default function App({ children }) {
  return (
    <BailayaProvider config={{ studioId: 'your-studio-id' }}>
      {children}
    </BailayaProvider>
  );
}

Hooks​

All hooks return { data, loading, error, refetch }.

HookReturns
useStudioProfile(overrideId?)StudioProfile
useInstructors(overrideId?)Instructor[]
useClasses(from?, overrideId?)StudioClass[]
useClassesByType(typeName, from?, overrideId?)StudioClass[]
useEvents(from?, overrideId?)StudioEvent[]
usePackages(overrideId?)StudioPackage[]
usePrivateLessonInstructors(overrideId?)PrivateLessonInstructor[]
useUserProfile(userId)UserProfile
import { useClasses } from '@bailaya/react';

function Schedule() {
  const { data: classes, loading, error } = useClasses();
  if (loading) return <p>Loading…</p>;
  if (error) return <p>{error.message}</p>;
  return <ul>{classes?.map(c => <li key={c.id}>{c.name}</li>)}</ul>;
}

Components​

Drop-in components that fetch data and render themselves.

ClassSchedule​

<ClassSchedule
  locale="en"
  currency="USD"
  bookNowText="Book"
  bookBaseUrl="https://www.bailaya.com/book/"
  hideBookButton={false}
/>

ClassScheduleByType​

<ClassScheduleByType typeName="Salsa" locale="en" currency="MXN" />

EventSchedule​

<EventSchedule locale="es" currency="MXN" />

InstructorList​

<InstructorList locale="en" />

StudioProfileCard​

<StudioProfileCard locale="en" />

StudioDescription​

<StudioDescription locale="es" />

StudioTypesList / StudioTypesGrid​

<StudioTypesList locale="en" hrefPrefix="/classes/" />
<StudioTypesGrid locale="en" showDescription={false} />

UserProfileCard​

<UserProfileCard userId="user_abc" locale="en" />

PrivateLessonList​

<PrivateLessonList
  locale="en"
  bookBaseUrl="https://www.bailaya.com/en/book/private-lesson/"
  labels={{ book: 'Book Now', availability: 'Availability', pricing: 'Pricing', minutes: 'min' }}
/>

PackageList​

<PackageList locale="en" buyBaseUrl="https://www.bailaya.com/packages/" />

Customization​

Every component accepts CSS class name props (e.g. className, itemClassName, nameClassName) so you can style them with any CSS framework. Pass renderItem to fully replace the default layout per item.