Paketan

@lia-labs/sdk-react

Salin halaman

React hooks untuk Lia SDK. Init, Lia's state sebagai hooks, dan tombol Lia ditampilkan saat komponen dipasang.

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

React 18 atau 19. Segala sesuatu dari @lia-labs/sdk di-re-export, jadi impor semuanya dari sini.

#Aplikasi

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

#Hooks

Hook	Memberi Anda
`useInit(options?)`	`{ status: "memuat"
`useSignal(value)`	Apa pun nilai SDK sebagai state (dibangun pada `useSyncExternalStore`).
`usePlayer()`, `useMode()`	Pemain, dan uji atau live.
`useLanguage()`, `useRtl()`	Orang tersebut'bahasa.
`useColorScheme()`, `useThemeParams()`	Terang atau gelap, dan Lia'warna mereka.
`useViewport()`, `useSafeArea()`, `useContentSafeArea()`, `useIsFullscreen()`	Tata letak.
`useStartParam()`, `useSoundOn()`, `useNotificationsAllowed()`	Sisa dari Lia'keadaan s.
`useBannerAd(position)`, `useBanner()`, `useNativeAd()`	Menempelkan banner saat terpasang (`"bottom"`, `"top"`, atau null untuk yang tidak ada), dan banner dan iklan native sekarang.
`useLiaEvent(event, handler)`	Mendengarkan salah satu dari Lia'acara saat terpasang (selalu memanggil handler terbaru Anda).
`useMainButton(options)`, `useSecondaryButton(options)`	Menunjukkan tombol saat terpasang. `options` adalah `{ text, onClick, isActive, isProgressVisible, color, textColor, position }`; lewati `null` atau `false` untuk menyembunyikannya. Versi terbaru Anda `onClick` selalu digunakan.
`useBackButton(onBack)`	Menunjukkan header'tombol kembali saat terpasang; `null` atau `false` menyembunyikannya.
`useSettingsButton(onOpen)`	Pengaturan dalam menu ⋯ saat terpasang.
`useClosingConfirmation(enabled?)`	Menanyakan sebelum menutup sambil diaktifkan.
`useVerticalSwipesDisabled(disabled?)`	Sebuah geser ke bawah menang'tidak tutup lembaran saat dinonaktifkan.

#Status sibuk

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

#Penggambaran server

Pengait membaca nilai pertamanya langsung dari SDK, jadi mereka merender di server juga (dengan default: Inggris, terang, belum diinisialisasi). init() hanya berjalan di browser, dalam efek.

Diterjemahkan otomatis. Bahasa Inggris adalah sumber kebenaran. Baca dalam Bahasa Inggris