Paketler

@lia-labs/sdk-react

Sayfayı kopyala

React hook'ları Lia SDK için. Başlat, Lia'nin durumu olarak hook'lar, ve Lia'nün butonları bir bileşen yüklendiğinde gösterilir.

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

React 18 veya 19. Her şeyden @lia-labs/sdk yeniden dışa aktarılır, bu yüzden buradan tümünü içe aktarın.

#Bir uygulama

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>;
}

#Bağlantılar

Bağlantı	Size verir
`useInit(options?)`	`{ durum: "yükleniyor"
`useSignal(value)`	Herhangi bir SDK değeri olarak durum (yapılandırılmış `useSyncExternalStore`).
`usePlayer()`, `useMode()`	Oyuncu, test veya canlı.
`useLanguage()`, `useRtl()`	Kişi'dilinde.
`useColorScheme()`, `useThemeParams()`	Açık veya koyu, ve Lia'u renkler.
`useViewport()`, `useSafeArea()`, `useContentSafeArea()`, `useIsFullscreen()`	Düzen.
`useStartParam()`, `useSoundOn()`, `useNotificationsAllowed()`	Lia 'ın geri kalanı'durumu.
`useBannerAd(position)`, `useBanner()`, `useNativeAd()`	Yüklendiğinde bir bantera çizer (`"bottom"`, `"top"`), ve banner ve yerel reklam şimdi.
`useLiaEvent(event, handler)`	Bir Lia'dan birini dinler'monte edilirken olaylar (her zaman en son işleyiciyi çağırır).
`useMainButton(options)`, `useSecondaryButton(options)`	Yüklendiğinde düğmeyi gösterir. `options` dır `{ text, onClick, isActive, isProgressVisible, color, textColor, position }`; geç `null` veya `false` gizlemek için. En son `onClick` her zaman kullanılır.
`useBackButton(onBack)`	Başlığı gösterir'u geri düğmesi basıldığında; monte edildiğinde, `null` veya `false` gizler.
`useSettingsButton(onOpen)`	Yüklü iken ⋯ menüsündeki ayarlar
`useClosingConfirmation(enabled?)`	Etkinken kapatmadan önce sorar.
`useVerticalSwipesDisabled(disabled?)`	Aşağıya kaydırma kazandı'devre dışı iken sayfayı kapat.

#İstek durumları

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

#Sunucu işleme

Bağlantılar, ilk değerlerini doğrudan SDK dan okur, bu yüzden sunucuda da render edilir (varsayılanlar: İngilizce, ışıklı, başlatılmamış). init() sadece tarayıcıda bir etkide çalışır.

Otomatik çeviri. İngilizce, doğru kaynaktır. İngilizce olarak oku