पैकेज

@lia-labs/sdk-react

पृष्ठ कॉपी करें

रिएक्ट के लिए Lia SDK के लिए हुक्स। शुरू करें, Lia के राज्य के रूप में हुक्स, और Lia के बटन जब एक घटक स्थापित होता है।

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

रिएक्ट 18 या 19. सब कुछ से @lia-labs/sdk पुनः निर्यात किया गया है, इसलिए इससे सभी आयात करें।

#एक एप

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

#हुक्स

हुक	आपको मिलता है
`useInit(options?)`	`{ status: "लोड हो रहा है"
`useSignal(value)`	कोई भी SDK मान राज्य के रूप में (बना हुआ है `useSyncExternalStore`).
`usePlayer()`, `useMode()`	खिलाड़ी, और परीक्षण या जीवंत।
`useLanguage()`, `useRtl()`	व्यक्ति'भाषा।
`useColorScheme()`, `useThemeParams()`	हल्का या गहरा, और Lia'अपने रंग।
`useViewport()`, `useSafeArea()`, `useContentSafeArea()`, `useIsFullscreen()`	लेआउट।
`useStartParam()`, `useSoundOn()`, `useNotificationsAllowed()`	सभी Lia के बाकी'राज्य।
`useBannerAd(position)`, `useBanner()`, `useNativeAd()`	स्थापित करते समय एक बैनर डॉक करता है (`"bottom"`, `"top"`, या खाली रखें), और बैनर और नैटिव एड अब।
`useLiaEvent(event, handler)`	एक Lia के लिए सुनता है'के लिए घटनाएं जब यह स्थापित है (हमेशा आपके नवीनतम हैंडलर को कॉल करता है)।
`useMainButton(options)`, `useSecondaryButton(options)`	जब यह माउंट किया जाता है तो बटन दिखाता है। `options` है `{ text, onClick, isActive, isProgressVisible, color, textColor, position }`; पास `null` या `false` के लिए इसे छिपा दें। आपका नवीनतम `onClick` हमेशा उपयोग किया जाता है।
`useBackButton(onBack)`	शीर्षक दिखाता है'अपने वापस बटन के साथ स्थापित होते समय; `null` या `false` इसे छिपा देता है।
`useSettingsButton(onOpen)`	स्थापित करते समय ⋯ मेनू में सेटिंग्स
`useClosingConfirmation(enabled?)`	सक्रिय रहते हुए बंद करने से पहले पूछता है।
`useVerticalSwipesDisabled(disabled?)`	एक स्वाइप नीचे जीता'तब अक्षम के दौरान शीट बंद करें।

#व्यस्त अवस्थाएं

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

#सर्वर रेंडरिंग

हुक्स पहले मान को सीधे SDK से पढ़ते हैं, इसलिए वे सर्वर पर भी रेंडर करते हैं (डिफ़ॉल्ट के साथ: अंग्रेजी, हल्का, अपरिचित)। init() केवल ब्राउज़र में एक प्रभाव में चलता है।

स्वचालित अनुवाद। अंग्रेजी सत्य का स्रोत है। अंग्रेजी में पढ़ें