Packages

@lia-labs/sdk-react

Kopya ang pahina

Mga React hooks para sa Lia SDK. Init, ang estado ng Lia bilang mga hook, at ang mga button ng Lia na ipinapakita habang ang isang komponente ay naka-mount.

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

React 18 o 19. Lahat mula @lia-labs/sdk ay re-exported, kaya mag-import ng lahat dito.

#Isang app

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	Nagbibigay sa iyo
`useInit(options?)`	`{ status: "naglo-load"
`useSignal(value)`	Anumang SDK value bilang state (binuo sa `useSyncExternalStore`).
`usePlayer()`, `useMode()`	Ang manlalaro, at test o live.
`useLanguage()`, `useRtl()`	Ang tao's wika.
`useColorScheme()`, `useThemeParams()`	Light o dark, at Lia'na mga kulay.
`useViewport()`, `useSafeArea()`, `useContentSafeArea()`, `useIsFullscreen()`	Layout.
`useStartParam()`, `useSoundOn()`, `useNotificationsAllowed()`	Ang natitirang Lia'ang state.
`useBannerAd(position)`, `useBanner()`, `useNativeAd()`	Nakadock ang isang banner habang naka-mount (`"bottom"`, `"top"`, o null para walang anuman), at ang banner at native ad ngayon.
`useLiaEvent(event, handler)`	Nag-uusap para sa isang sa Lia'ang mga event habang naka-mount (ang function ay palaging tumatawag sa iyong pinakabagong handler).
`useMainButton(options)`, `useSecondaryButton(options)`	Nagpapakita ng button habang naka-mount. `options` ay `{ text, onClick, isActive, isProgressVisible, color, textColor, position }`; ipasa `null` o `false` upang itago ito. Ang iyong huling `onClick` ay palaging ginagamit.
`useBackButton(onBack)`	Nagpapakita ng header'na pindutan ng back habang naka-mount; `null` o `false` itinago ito.
`useSettingsButton(onOpen)`	Mga setting sa menu ng ⋯ habang naka-mount.
`useClosingConfirmation(enabled?)`	Nagtanong bago isara habang naka-enable.
`useVerticalSwipesDisabled(disabled?)`	Isang swipe down ay nanalo't isara ang sheet habang naka-disable.

#Mga busy state

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

#Server rendering

Ang mga hook ay binabasa ang unang halaga nang direkta mula sa SDK, kaya sila ay nagrereder sa isang server din (kasama ang mga default: English, light, hindi pa ini-initialize). init() tumatakbo lamang sa browser, sa isang effect.

Awtomatikong isinalin. Ang English ay ang source of truth. Basahin sa Ingles