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功能支持

貢獻者

與往常一樣，感謝我們出色的貢獻者！

由貢獻者製成。

貢獻

• 閱讀有關它的信息？路線圖和官方文檔電報迷你應用程序

• 有問題嗎？查看我們的例子，刺激和問題

• 分叉並貢獻自己的修改