Paquetes

@lia-labs/sdk-react

Copiar página

Ganchos de React para el Lia SDK. Inicio, el estado de Lia como ganchos, y los botones de Lia mostrados mientras un componente está montado.

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

React 18 o 19. Todo desde @lia-labs/sdk se reexporta, así que importe todo desde aquí.

#Una 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	Te da
`useInit(options?)`	`{ estado: "cargando"
`useSignal(value)`	Cualquier valor SDK como estado (construido en `useSyncExternalStore`).
`usePlayer()`, `useMode()`	El jugador, y de prueba o en vivo.
`useLanguage()`, `useRtl()`	La persona'su idioma.
`useColorScheme()`, `useThemeParams()`	Claro o oscuro, y Lia's colores.
`useViewport()`, `useSafeArea()`, `useContentSafeArea()`, `useIsFullscreen()`	Diseño.
`useStartParam()`, `useSoundOn()`, `useNotificationsAllowed()`	El resto de Lia'estado.
`useBannerAd(position)`, `useBanner()`, `useNativeAd()`	Ancla una banda publicitaria mientras está montada (`"bottom"`, `"top"`), o null para ninguno), y la banda publicitaria y el anuncio nativo ahora.
`useLiaEvent(event, handler)`	Escucha uno de Lia'los eventos mientras está montado (siempre llama a tu manejador más reciente).
`useMainButton(options)`, `useSecondaryButton(options)`	Muestra el botón mientras está montado. `options` es `{ text, onClick, isActive, isProgressVisible, color, textColor, position }`; pasar `null` o `false` para ocultarlo. Tu última `onClick` se usa siempre.
`useBackButton(onBack)`	Muestra el encabezado's botón de retroceso mientras está montado; `null` o `false` lo oculta.
`useSettingsButton(onOpen)`	Configuraciones en el menú ⋯ mientras está montado.
`useClosingConfirmation(enabled?)`	Pregunta antes de cerrar mientras esté activado.
`useVerticalSwipesDisabled(disabled?)`	Un deslizar hacia abajo ganó'cerrar la hoja mientras está desactivada.

#Estados ocupados

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

#Renderizado en el servidor

Los hooks leen su primer valor directamente del SDK, por lo que se renderizan en un servidor también (con valores predeterminados: inglés, claro, no inicializado). init() solo se ejecuta en el navegador, en un efecto.

Traducido automáticamente. El inglés es la fuente de verdad. Leer en inglés