react telegram web app

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

Участники

Как всегда, благодаря нашим удивительным участникам!

Сделано с участниками.

Внося

• Прочитать об этом? Дорожная карта и официальная документация Telegram Mini Apps

• Есть вопросы? Ознакомьтесь с нашими примерами, Duscussions и проблемами

• Вилка и внесите свои собственные модификации