Пакеты

@lia-labs/sdk-react

Копировать страницу

Хуки React для Lia SDK. Init, состояние Lia как хуки, и кнопки Lia, отображаемые, когда компонент загружен.

npm install @lia-labs/sdk @lia-labs/sdk-react

React 18 или 19. Все от @lia-labs/sdk переэкспортируется, поэтому импортируйте всё отсюда.

#Приложение

import { useEffect, useState } from 'react';
import { isLia, mockLia, pay, ready, useBackButton, useClosingConfirmation, useInit, useLanguage, useMainButton } from '@lia-labs/sdk-react';

if (!isLia()) mockLia(); // building in a desktop browser

export function App() {
  const lia = useInit();
  const language = useLanguage();
  const [screen, setScreen] = useState<'home' | 'game'>('home');

  useEffect(() => {
    if (lia.status === 'ready') ready();
  }, [lia.status]);

  useMainButton(screen === 'home' && { text: 'Buy extra lives', onClick: () => pay('extra-lives') });
  useBackButton(screen === 'game' && (() => setScreen('home')));
  useClosingConfirmation(screen === 'game');

  if (lia.status === 'loading') return null;
  if (lia.status === 'error') return <p>Open this app inside Lia.</p>;
  return <h1>Hello, @{lia.result.player.name} ({language})</h1>;
}

#Закрепления

Закрепить	Дает вам
`useInit(options?)`	`{ статус: "загрузка"
`useSignal(value)`	Любое значение SDK как состояние (создано на `useSyncExternalStore`).
`usePlayer()`, `useMode()`	Игрок, и тестовый или живой.
`useLanguage()`, `useRtl()`	Человек'язык.
`useColorScheme()`, `useThemeParams()`	Светлый или темный, и Lia'цвета.
`useViewport()`, `useSafeArea()`, `useContentSafeArea()`, `useIsFullscreen()`	Макет.
`useStartParam()`, `useSoundOn()`, `useNotificationsAllowed()`	Остальное Lia'состояние.
`useBannerAd(position)`, `useBanner()`, `useNativeAd()`	Закрепляет баннер при монтировании (`"bottom"`, `"top"`, или null для отсутствия), и баннер и нативная реклама теперь.
`useLiaEvent(event, handler)`	Слушает один из Lia'события во время монтирования (всегда вызывает ваш последний обработчик).
`useMainButton(options)`, `useSecondaryButton(options)`	Показывает кнопку, пока прикреплен. `options` это `{ text, onClick, isActive, isProgressVisible, color, textColor, position }`; передать `null` или `false` чтобы скрыть его. Ваш последний `onClick` всегда используется.
`useBackButton(onBack)`	Показывает заголовок'кнопка возврата во время монтирования; `null` или `false` скрывает его.
`useSettingsButton(onOpen)`	Настройки в меню ⋯, пока прикреплено.
`useClosingConfirmation(enabled?)`	Спрашивает перед закрытием, когда включено.
`useVerticalSwipesDisabled(disabled?)`	Свайп вниз выиграл't закрыть таблицу, когда она отключена.

#Состояния занятости

const [busy, setBusy] = useState(false);
useMainButton({
  text: 'Buy',
  isProgressVisible: busy,
  onClick: async () => {
    setBusy(true);
    try { await buy(); } finally { setBusy(false); }
  },
});

#Рендеринг на сервере

Хуки получают первое значение прямо из SDK, поэтому они отображаются и на сервере (с дефолтами: английский, светлый, не инициализированный). init() работает только в браузере, в эффекте.

Автоматически переведено. Английский — источник истины. Читать на английском