react telegram web app Download - react telegram web app Source Code Download

react telegram web app

شفرة المصدر الأخرى

v2.1.9

تنزيل

تفاعل مكونات Telegram Miniapp

أمثلة العرضية والرمز المباشر

يمكنك محاولة فتح BOT TELEGO DEMO مع React WebAppReact_Telegram_WEB_APP_BOT.

أيضًا ، يمكنك البحث عن رمز المصدر التجريبي.

التثبيت والبدء

1⃣ قبل كل شيء ، يجب عليك القيام بتهيئة خطوة تطبيقات الويب ، لأن الحزمة لها اعتماد على سياق تطبيق Telegram Web.

2⃣ تثبيت عن طريق التشغيل: npm i @vkruglikov/react-telegram-web-app --save . اليوم نحن ندعم React^18.

3⃣ جربه عن طريق كتابة رمز.

 استيراد {mainbutton ، useshowpopup} من '@vkruglikov/react-telegram-web-app' ؛ const content = () => {
  const showpopup = useshowpopup () ؛

  const handleclick = () => showpopup ({message: 'hello ، أنا منبثق' ،}) ؛

  return <mainbutton text = "show popup" onClick = {handleclick} /> ؛} ؛

وثائق قصيرة

عناصر

MainButton - يتحكم المكون في الزر الرئيسي ، والذي يتم عرضه في أسفل تطبيق الويب في واجهة Telegram.
Backbutton - يتحكم هذا المكون في زر الخلف ، والذي يمكن عرضه في رأس تطبيق الويب في واجهة Telegram.

WebAPPPROVIDER - توفر WebAPPPPROVIDER السياق مع WebApp للمكونات والخطافات. يمكنك محاولة تمرير كائن مع خيارات

 استيراد {webappprovider ، mainbutton ، backbutton} من '@vkruglikov/react-telegram-web-app' ؛ <webappprovider
  الخيارات = {{smoothButTonstransition: True ،
  }}>
  {/** استخدم المكونات داخل الموفر*/}
  <mainbutton {...} />
  <backbutton {...} /> < /webappprovider>

السنانير

UseshowPopup - يوفر هذا الخطاف وظيفة showPopup التي تعرض المنبثقة الأصلية.
UsePhapticFeedback - يوفر هذا الخطاف وظائف impactOccurred و notificationOccurred و selectionChanged التي تتحكم في ردود الفعل.
USETHEMEPARAMS - يوفر هذا الخطاف كائن colorScheme و themeParams .
USESCANQRPOPUP - يوفر هذا الخطاف وظائف showScanQrPopup و closeScanQrPopup .
userAdtextFromClipboard - يوفر هذا الخطاف وظيفة readTextFromClipboard .
يستخدم WitchInlineQuery - يوفر هذا الخطاف وظيفة switchInlineQuery .
UseExpand - يوفر هذا الخطاف حالة isExpanded ، expand() مقبض.
UsecloudStorage - يوفر هذا الخطاف كائن CloudStorage كوظائف الوعد
useInitdata - يوفر هذا الخطاف كائن InitDataUnsafe و InitData
UseWebApp - هذا الخطاف يوفر فقط كائن WebApp الأصلي