React-хуки

import { ExodeMiniAppProvider } from '@exode-team/sdk/miniapp/react'

function App() {
  return (
    <ExodeMiniAppProvider config={{ appId: 'my-app', targetOrigin: 'https://my-school.exode.biz' }}>
      <MyApp />
    </ExodeMiniAppProvider>
  )
}

function Status() {
  const { app, isReady, error } = useExodeApp()

  if (error) return <div>Ошибка подключения: {error.message}</div>
  if (!isReady) return <div>Соединение с Exode...</div>

  return <div>Подключено</div>
}

function Greeting() {
  const { user, isLoggedIn } = useExodeUser()

  if (!isLoggedIn) return <div>Не авторизован</div>

  return <div>Привет, {user?.firstName}</div>
}

function ThemedBox() {
  const { scheme, isDark } = useExodeTheme()

  return (
    <div style={{ background: isDark ? '#1a1a1a' : '#ffffff' }}>
      Схема: {scheme}
    </div>
  )
}

function SchoolInfo() {
  const { school } = useExodeSchool()

  return <div>{String(school?.name ?? '')}</div>
}

function Layout({ children }) {
  const { isDesktop, isMobile, language, platform } = useExodeConfig()

  return (
    <div className={isMobile ? 'layout-compact' : 'layout-wide'} lang={language}>
      {children}
    </div>
  )
}

function NavButtons() {
  const { navigate, back } = useExodeNavigation()

  return (
    <>
      <button onClick={() => navigate('/course/:courseId([0-9_A-Za-z]+)', { courseId: '123' })}>
        Открыть курс
      </button>
      <button onClick={() => back()}>Назад</button>
    </>
  )
}

function Controls() {
  const { showSnackbar, setTabbarVisible, setHeaderVisible, minimize, close } = useExodeUI()

  return (
    <>
      <button onClick={() => showSnackbar({ message: 'Готово!', type: 'success' })}>
        Уведомление
      </button>
      <button onClick={() => setTabbarVisible(false)}>Скрыть tabbar</button>
      <button onClick={() => minimize()}>Свернуть окно</button>
      <button onClick={() => close()}>Закрыть приложение</button>
    </>
  )
}

import { useEffect } from 'react'

function Poller() {
  const { visible } = useExodeVisibility()

  useEffect(() => {
    if (!visible) return

    const timer = setInterval(() => refetch(), 5000)

    return () => clearInterval(timer)
  }, [ visible ])

  return <Dashboard/>
}

import { useEffect } from 'react'
import { useExodeInitData } from '@exode-team/sdk/miniapp/react'

function Session() {
  const { initData } = useExodeInitData() // string | null — null when opened outside Exode

  useEffect(() => {
    if (!initData) return

    fetch('/api/session', { method: 'POST', headers: { 'X-Exode-Init-Data': initData } })
  }, [ initData ])

  return null
}

import {
  ExodeMiniAppProvider,
  useExodeApp,
  useExodeUser,
  useExodeTheme,
  useExodeUI,
} from '@exode-team/sdk/miniapp/react'

function Content() {
  const { isReady, error } = useExodeApp()
  const { user } = useExodeUser()
  const { isDark } = useExodeTheme()
  const { showSnackbar } = useExodeUI()

  if (error) return <div>Ошибка: {error.message}</div>
  if (!isReady) return <div>Загрузка...</div>

  return (
    <div data-theme={isDark ? 'dark' : 'light'}>
      <h1>Привет, {user?.firstName ?? 'гость'}</h1>
      <button onClick={() => showSnackbar({ message: 'Привет!', type: 'info' })}>
        Показать уведомление
      </button>
    </div>
  )
}

export default function App() {
  return (
    <ExodeMiniAppProvider config={{ appId: 'my-app', renderMode: 'immediate' }}>
      <Content />
    </ExodeMiniAppProvider>
  )
}