react telegram web app

Telegram Miniappの反応コンポーネント

ライブデモとコードの例

React WebApp @React_Telegram_Web_App_BotでDemo Telegramボットを開くことができます。

また、デモソースコードを見ることができます。

インストールと開始

1収列第一に、パッケージにはTelegram Webアプリのコンテキストに依存するため、Webアプリのステップを初期化する必要があります。

2ランニングによるインストール： npm i @vkruglikov/react-telegram-web-app --save 。今日はReact^18をサポートしています。

3収コードを作成して試してみてください。

 '@vkruglikov/React-Telegram-Web-app'; const content =（）=> {から{mainbutton、useshowpopup}をインポート
  const showpopup = useshowpopup（）;

  const handleclick =（）=> showpopup（{メッセージ： 'こんにちは、私はポップアップ'、}）;

  return <mainbutton text = "show popup" onclick = {handleclick} />;};

短いドキュメント

コンポーネント

• Mainbutton -Componentは、TelegramインターフェイスのWebアプリの下部に表示されるメインボタンを制御します。

• バックボタン - このコンポーネントは、TelegramインターフェイスのWebアプリのヘッダーに表示できるバックボタンを制御します。

• WebAppProvider -webAppProviderコンポーネントとフック用のWebAppを使用してコンテキストを提供します。オプションをオプションで渡すようにすることができます

  '@vkruglikov/React-Telegram-Web-app'; <WebAppProviderから{webAppProvider、MainButton、Backbutton}をインポートします
    options = {{smoothbuttonstransition：true、
    }}>
    {/**プロバイダー内のコンポーネントを使用*/}
    <mainbutton {...} />
    <backbutton {...} /> < /webappprovider>

フック

• USESHOWPOPUP-このフックは、ネイティブのポップアップを示すshowPopup機能を提供します。

• UsehapticFeedback-このフックは、触覚フィードバックを制御するimpactOccurred 、 notificationOccurred 、およびselectionChanged関数を提供します。

• USETHEMEPARAMS -このフックはcolorSchemeおよびthemeParamsオブジェクトを提供します。

• USESCANQRPOPUP -このフックは、 showScanQrPopupとcloseScanQrPopup関数を提供します。

• usereadtextfromclipboard -このフックは、clipboard関数をreadTextFromClipboardに提供します。

• USESWITCHINLINEQUERY -このフックはswitchInlineQuery機能を提供します。

• UseExpand -このフックはisExpanded状態を提供し、 expand() 。

• usecloudstorage-このフックは、プロミス関数としてCloudStorageオブジェクトを提供します

• useinitdata-このフックは、 InitDataUnsafeおよびInitDataオブジェクトを提供します

• usewebapp-このフックは、ネイティブのWebAppオブジェクトを提供するだけです

ロードマップ

これが来るものです：

• 将来的には、電報のコンテキストなしに、Webアプリケーションでも米国のコンポーネントを使用したいと考えています。

• すべてのTelegram WebApp機能サポート

• メインテレグラムWebApp機能サポート

貢献者

いつものように、私たちの素晴らしい貢献者に感謝します！

貢献者で作られています。

貢献

• それについて読んでください？ロードマップと公式ドキュメントテレグラムミニアプリ

• 質問がありますか？私たちの例、怪我、問題をチェックしてください

• フォークと独自の修正に貢献してください