react telegram web app Скачать - react telegram web app Загрузите исходный код

react telegram web app

Другой исходный код

v2.1.9

Скачать

React Components для Telegram miniapp

Живые примеры демонстрации и кода

Вы можете попробовать открыть Demo Telegram Bot с помощью React webapp @react_telegram_web_app_bot.

Кроме того, вы можете искать демо -исходный код.

Установка и начните

1⃣ Прежде всего , вы должны выполнять шаг инициализации веб -приложений, потому что пакет имеет зависимость контекста веб -приложений Telegram.

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 ({Сообщение: «Привет, я всплываю»,});

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

Короткая документация

Компоненты

Mainbutton - компонент управляет основной кнопкой, которая отображается в нижней части веб -приложения в интерфейсе Telegram.
Backbutton - этот компонент управляет кнопкой Back, которая может отображаться в заголовке веб -приложения в интерфейсе Telegram.

Webappprovider - Webapprovider предоставляет контекст с WebApp для компонентов и крючков. Вы можете попытаться передать объект с параметрами

 Import {webapprovider, Mainbutton, Backbutton} от '@Vkruglikov/React-telegram-web-app'; <webapprovider
  Options = {{SmoothButTonstransition: True,
  }}>
  {/** Используйте компоненты внутри поставщика*/}
  <Mainbutton {...} />
  <Backbutton {...} /> < /webappprovider>

Крючки

UseshowPopup - Этот крючок обеспечивает функцию showPopup , которая показывает собственное всплывающее окно.
USEHAPTICFEEDBACK - Этот крючок обеспечивает impactOccurred , notificationOccurred и selectionChanged функции, которые контролируют тактичную обратную связь.
Usetheparams - Этот крючок обеспечивает объект colorScheme и themeParams .
USESCANQRPOPUP - Этот крюк предоставляет функции showScanQrPopup и closeScanQrPopup .
usereadTextFromClipboard - этот крюк предоставляет функцию readTextFromClipboard .
Использование witchinlinequery - этот крючок обеспечивает функцию switchInlineQuery .
Использование Expand - Этот крючок обеспечивает isExpanded состояние и ручку expand() .
USECloudStorage - Этот крюк предоставляет объект CloudStorage в качестве функций обещания
Использовать IinitData - этот крюк предоставляет объект InitDataUnsafe и InitData
Использование webApp - этот крюк просто предоставляет нативный объект WebApp

Дорожная карта

Вот что будет:

В будущем мы хотели бы использовать американские компоненты также в веб -приложении, без телеграммы.
Вся поддержка функций Web App Telegram
Поддержка функций Main Telegram WebApp