Перейти к основному содержимому

SDK React

@bailaya/react предоставляет хуки и готовые к рендерингу компоненты для React 17+.

Установка​

npm install @bailaya/react @bailaya/core

Настройка​

Оберните ваше приложение (или поддерево, которому нужны данные BailaYa) в BailayaProvider:

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

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

Хуки​

Все хуки возвращают { data, loading, error, refetch }.

ХукВозвращает
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>Загрузка…</p>;
  if (error) return <p>{error.message}</p>;
  return <ul>{classes?.map(c => <li key={c.id}>{c.name}</li>)}</ul>;
}

Компоненты​

Встроенные компоненты, которые получают данные и рендерят себя автоматически.

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

Кастомизация​

Каждый компонент принимает пропсы CSS-классов (напр. className, itemClassName, nameClassName), чтобы вы могли стилизовать их с помощью любого CSS-фреймворка. Передайте renderItem для полной замены макета по умолчанию для каждого элемента.