Pacotes

@lia-labs/sdk-react

Copiar página

Hooks do React para o Lia SDK. Init, o estado de Lia como hooks, e os botões de Lia mostrados enquanto um componente está montado.

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

React 18 ou 19. Tudo desde @lia-labs/sdk é reexportado, então importe-o tudo aqui.

#Um 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	Lhe dá
`useInit(options?)`	`{ status: "carregando"
`useSignal(value)`	Qualquer valor SDK como estado (construído em `useSyncExternalStore`).
`usePlayer()`, `useMode()`	O jogador, e testes ou produção.
`useLanguage()`, `useRtl()`	A pessoa's idioma.
`useColorScheme()`, `useThemeParams()`	Claro ou escuro, e Lia'cores.
`useViewport()`, `useSafeArea()`, `useContentSafeArea()`, `useIsFullscreen()`	Layout.
`useStartParam()`, `useSoundOn()`, `useNotificationsAllowed()`	O restante Lia'estado.
`useBannerAd(position)`, `useBanner()`, `useNativeAd()`	Fixa um banner enquanto está montado (`"bottom"`, `"top"`, ou null para nenhum), e o banner e o anúncio nativo agora.
`useLiaEvent(event, handler)`	Escuta um dos Lia'eventos enquanto montado (sempre chama seu último manipulador).
`useMainButton(options)`, `useSecondaryButton(options)`	Mostra o botão enquanto montado. `options` é `{ text, onClick, isActive, isProgressVisible, color, textColor, position }`; passe `null` ou `false` para escondê-lo. Seu último `onClick` é sempre usado.
`useBackButton(onBack)`	Mostra o cabeçalho's botão de voltar enquanto montado; `null` ou `false` esconde-o.
`useSettingsButton(onOpen)`	Configurações no menu ⋯ enquanto montado.
`useClosingConfirmation(enabled?)`	Pergunta antes de fechar enquanto está ativado.
`useVerticalSwipesDisabled(disabled?)`	Uma deslizamento para baixo venceu'não feche a planilha enquanto estiver desativada.

#Estados ocupados

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

#Renderização do servidor

Os ganchos leem seu primeiro valor diretamente do SDK, então eles renderizam em um servidor também (com padrões: inglês, claro, não inicializado). init() executa apenas no navegador, em um efeito.

Traduzido automaticamente. O inglês é a fonte de verdade. Leia em inglês