Unduh react telegram web app - react telegram web app Source Code Unduh

react telegram web app

Kode sumber lainnya

v2.1.9

Unduh

Komponen Bereaksi untuk MiniApp Telegram

Contoh Demo & Kode Langsung

Anda dapat mencoba Bot Demo Telegram Bot dengan React Webapp @react_telegram_web_app_bot.

Anda juga dapat melihat kode sumber demo.

Instalasi & Mulailah

1️⃣ terutama , Anda harus melakukan inisialisasi langkah aplikasi web, karena paket memiliki ketergantungan konteks aplikasi web telegram.

2️⃣ Instal dengan menjalankan: npm i @vkruglikov/react-telegram-web-app --save . Hari ini kami mendukung React^18.

3️⃣ Cobalah dengan menulis kode.

 Impor {MainButton, USESHOWPOPUP} dari '@vkruglikov/react-telegram-web-app'; const content = () => {
  const showpopup = useShowPopup ();

  const handleclick = () => showpopup ({pesan: 'halo, saya popup',});

  return <MainButton text = "Show Popup" OnClick = {HandLeClick} />;};

Dokumentasi pendek

Komponen

Mainbutton - Komponen mengontrol tombol utama, yang ditampilkan di bagian bawah aplikasi web di antarmuka telegram.
Backbutton - Komponen ini mengontrol tombol Kembali, yang dapat ditampilkan di header aplikasi Web di antarmuka Telegram.

WebAppProvider - WebAppProvider menyediakan konteks dengan Webapp untuk komponen dan kait. Anda dapat mencoba melewati objek dengan opsi

 Impor {WebAppProvider, MainButton, BackButton} dari '@vkruglikov/react-telegram-web-app'; <webappprovider
  opsi = {{smoothbuttonstransition: true,
  }}>
  {/** Gunakan komponen di dalam penyedia*/}
  <Mainbutton {...} />
  <Backbutton {...} /> < /webappprovider>

Kait

USESHOWPOPUP - Kait ini menyediakan fungsi showPopup yang menunjukkan popup asli.
UseHapticFeedback - Kait ini menyediakan impactOccurred , notificationOccurred dan fungsi selectionChanged yang mengontrol umpan balik haptic.
USETHEMEPARAMS - Kait ini menyediakan objek colorScheme dan themeParams .
USESCANQRPOPUP - Kait ini menyediakan fungsi showScanQrPopup dan closeScanQrPopup .
UsereAdtextFromClipboard - Hook ini menyediakan fungsi readTextFromClipboard .
UseWitchInlineQuery - Hook ini menyediakan fungsi switchInlineQuery .
USEEXPAND - Kait ini memberikan keadaan isExpanded , dan expand() pegangan.
UsecloudStorage - Hook ini menyediakan objek CloudStorage sebagai fungsi janji
UseInitData - Hook ini menyediakan objek InitDataUnsafe dan InitData
Usewebapp - Hook ini hanya menyediakan objek WebApp asli

Peta jalan

Inilah yang akan terjadi:

Di masa depan, kami ingin menggunakan komponen AS juga dalam aplikasi web, tanpa konteks telegram.
Semua dukungan fitur WebApp Telegram
Dukungan Fitur Webapp Telegram Utama