Paquets

@lia-labs/sdk-react

Copier la page

Des hooks React pour le Lia SDK. Init, l'état de Lia en tant que hooks, et les boutons de Lia affichés pendant qu'un composant est chargé.

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

React 18 ou 19. Tout commence par @lia-labs/sdk est réexporté, donc importez-le tous depuis ici.

#Une application

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

#Raccords

Raccord	Vous donne
`useInit(options?)`	`{ status: "chargement"
`useSignal(value)`	N'importe quelle valeur SDK en tant qu'état (basé sur `useSyncExternalStore`).
`usePlayer()`, `useMode()`	Le joueur, et test ou live.
`useLanguage()`, `useRtl()`	La personne'langue.
`useColorScheme()`, `useThemeParams()`	Clair ou sombre, et Lia'les couleurs.
`useViewport()`, `useSafeArea()`, `useContentSafeArea()`, `useIsFullscreen()`	Mise en page.
`useStartParam()`, `useSoundOn()`, `useNotificationsAllowed()`	Le reste de Lia'son état.
`useBannerAd(position)`, `useBanner()`, `useNativeAd()`	Ancre un bandeau lors de l'installation (`"bottom"`, `"top"`, ou null pour aucun), et le bandeau et l'annonce native maintenant.
`useLiaEvent(event, handler)`	Écoute l'une des Lia'les événements pendant le montage (toujours appelle votre gestionnaire le plus récent).
`useMainButton(options)`, `useSecondaryButton(options)`	Affiche le bouton tant qu'il est monté. `options` est `{ text, onClick, isActive, isProgressVisible, color, textColor, position }`; passer `null` ou `false` pour le cacher. Votre dernière `onClick` est toujours utilisé.
`useBackButton(onBack)`	Affiche l'en-tête'le bouton retour pendant le montage ; `null` ou `false` le cache.
`useSettingsButton(onOpen)`	Paramètres dans le menu ⋯ pendant le montage.
`useClosingConfirmation(enabled?)`	Demande avant de fermer pendant qu'elle est activée.
`useVerticalSwipesDisabled(disabled?)`	Un glissement vers le bas a gagné'ne pas fermer la feuille lorsqu'elle est désactivée.

#États occupés

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

#Rendu côté serveur

Les hooks lisent leur première valeur directement depuis SDK, donc ils s'affichent aussi sur un serveur (avec les paramètres par défaut : anglais, clair, non initialisé). init() ne s'exécute qu'au sein du navigateur, dans un effet.

Traduit automatiquement. L'anglais est la source de vérité. Lire en anglais