@telegram-apps/sdk-react@2

React.js 软件包提供开发人员在开发小型 应用程序时可能会用到的实用工具。

TIP

由于本软件包提供了扩展 @telegram-apps/sdk 功能的实用程序函数 ，建议首先查看 SDK 软件包 文档。

安装

在继续之前，假定您已经安装了 react 软件包，因为它是 对等软件包的依赖项。

pnpm

pnpm i @telegram-apps/sdk-react

npm

npm i @telegram-apps/sdk-react

yarn

yarn add @telegram-apps/sdk-react

INFO

此软件包完全重新导出 @telegram-apps/sdk 软件包，因此 您无需单独安装。

使用方法

下面是该软件包的一个简单使用示例：

index.tsx

import ReactDOM from 'react-dom/client';
import { init, backButton } from '@telegram-apps/sdk-react';

import { BackButton } from './BackButton.js';

// Initialize the package.
init();

// Mount the Back Button, so we will work with 
// the actual component properties.
backButton.mount();

ReactDOM
  .createRoot(document.getElementById('root')!)
  .render(<BackButton/>);

BackButton.ts

import { useEffect } from 'react';
import { backButton, useSignal } from '@telegram-apps/sdk-react';

/**
 * Component which controls the Back Button visibility.
 */
export function BackButton() {
  const isVisible = useSignal(backButton.isVisible);

  useEffect(() => {
    console.log('The button is', isVisible ? 'visible' : 'invisible');
  }, [isVisible]);

  useEffect(() => {
    backButton.show();
    return () => {
      backButton.hide();
    };
  }, []);

  return null;
}

Hooks

useSignal

该辅助工具允许开发人员在 应用程序中使用我们的 signals。

它返回基础值，并在信号值发生变化时进行更新。

import { useEffect } from 'react';
import { backButton, useSignal } from '@telegram-apps/sdk-react';

function Component() {
  const isVisible = useSignal(backButton.isVisible);

  useEffect(() => {
    console.log('The button is', isVisible ? 'visible' : 'invisible');
  }, [isVisible]);

  useEffect(() => {
    backButton.show();
    return () => {
      backButton.hide();
    };
  }, []);

  return null;
}

useLaunchParams

返回迷你应用程序启动参数的函数。

import { useLaunchParams } from '@telegram-apps/sdk-react';

function Component() {
  const lp = useLaunchParams();
  return <div>Start parameter: {lp.startParam}</div>;
}