react telegram web app

电报miniapp的反应组件

实时演示和代码示例

您可以尝试使用React WebApp @react_telegram_web_app_bot尝试打开演示电报机器人。

另外，您可以查看演示源代码。

安装并开始

1️⃣首先，您必须进行初始化Web应用程序步骤，因为软件包具有Telegram Web应用程序上下文的依赖性。

2️⃣通过运行： npm i @vkruglikov/react-telegram-web-app --save 。今天，我们支持React^18。

3️⃣通过编写代码尝试一下。

 import {mainbutton，useshowpopup}来自'@vkruglikov/react-telegram-web-app'; const content =（）=> {
  const showpopup = useshowpopup（）;

  const handleclick =（）=> showpopup（{message：'Hello，I Am Popup'，}）;

  返回<mainbutton text =“ show popup” onclick = {handleclick} />;};

简短的文档

成分

• MainButton-组件控制主按钮，该按钮显示在电报接口中的Web应用程序底部。

• backbutton-此组件控制“后退”按钮，该按钮可以显示在电报接口中的Web应用程序的标题中。

• WebAppProvider -WebAppProvider为组件和钩子提供WebApp上下文。您可以尝试通过选项传递对象

  import {webappprovider，mainbutton，backbutton}来自'@vkruglikov/react-telegram-web-app'; <webappprovider
    选项= {{SmoothButTonstransition：true，
    }}>
    {/**使用提供商内部的组件*/}
    <mainbutton {...} />
    <backbutton {...} /> < /webappprovider>

钩子

• USESHOWPOPUP-此挂钩提供了显示本机弹出窗口的showPopup函数。

• UseHapticFeedback-此挂钩提供了控制触觉反馈的impactOccurred ， notificationOccurred和selectionChanged功能。

• usethemeparams-此钩子提供了colorScheme和themeParams对象。

• USESCANQRPOPUP-此挂钩提供showScanQrPopup和closeScanQrPopup函数。

• usereadTextFromClipboard-此挂钩提供readTextFromClipboard功能。

• 使用WitchinlineQuery-此挂钩提供switchInlineQuery函数。

• USE Expand-此挂钩提供了isExpanded状态，并expand()句柄。

• usecloudstorage-此挂钩提供CloudStorage对象，作为承诺功能

• UseInitdata-此挂钩提供InitDataUnsafe和InitData对象

• USEWEBAPP-此钩仅提供本机WebApp对象

路线图

即将到来：

• 将来，我们希望在没有电报上下文的情况下也将我们的组件在Web应用程序中使用。

• 所有Telegram WebApp功能支持

• 主电报WebApp功能支持

贡献者

与往常一样，感谢我们出色的贡献者！

由贡献者制成。

贡献

• 阅读有关它的信息？路线图和官方文档电报迷你应用程序

• 有问题吗？查看我们的例子，刺激和问题

• 分叉并贡献自己的修改