Skip to main content

React SDK

@bailaya/react უზრუნველყოფს hook-ებს და მზა კომპონენტებს 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>
  );
}

Hook-ები​

ყველა hook აბრუნებს { data, loading, error, refetch }.

Hookაბრუნებს
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 კლასის სახელის props-ებს (მაგ. className, itemClassName, nameClassName), რომ შეძლოთ სტილიზება ნებისმიერი CSS ფრეიმვორკით. გადაეცით renderItem ელემენტის ნაგულისხმევი განლაგების სრულად ჩასანაცვლებლად.