Zum Hauptinhalt springen

React SDK

@bailaya/react bietet Hooks und fertige Komponenten fuer React 17+.

Installation​

npm install @bailaya/react @bailaya/core

Einrichtung​

Umschliessen Sie Ihre App (oder den Unterbaum, der BailaYa-Daten benoetigt) mit BailayaProvider:

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

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

Hooks​

Alle Hooks geben { data, loading, error, refetch } zurueck.

HookGibt zurueck
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>Laden…</p>;
  if (error) return <p>{error.message}</p>;
  return <ul>{classes?.map(c => <li key={c.id}>{c.name}</li>)}</ul>;
}

Komponenten​

Fertige Komponenten, die Daten abrufen und sich selbst rendern.

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/" />

Anpassung​

Jede Komponente akzeptiert CSS-Klassennamen-Props (z.B. className, itemClassName, nameClassName), damit Sie sie mit jedem CSS-Framework stylen koennen. Uebergeben Sie renderItem, um das Standard-Layout pro Element vollstaendig zu ersetzen.