Aller au contenu principal

SDK React

@bailaya/react fournit des hooks et des composants prets a l'emploi pour React 17+.

Installation​

npm install @bailaya/react @bailaya/core

Configuration​

Enveloppez votre application (ou le sous-arbre qui a besoin des donnees BailaYa) avec BailayaProvider :

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

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

Hooks​

Tous les hooks retournent { data, loading, error, refetch }.

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

Composants​

Composants integres qui recuperent les donnees et se rendent eux-memes.

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

Personnalisation​

Chaque composant accepte des props de noms de classes CSS (ex. className, itemClassName, nameClassName) pour que vous puissiez les styliser avec n'importe quel framework CSS. Passez renderItem pour remplacer entierement la mise en page par defaut par element.