react telegram web app下载 - react telegram web app源代码下载

react telegram web app

其他源码

v2.1.9

下载

电报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对象