@vkruglikov/react-telegram-web-app NPM

React components for Telegram MiniApp

🔴 Live Demo & Code Examples

You can try open demo telegram bot with React WebApp @react_telegram_web_app_bot.

Also, you can look demo source code.

🔧 Installation & Get started

1️⃣ Foremost, you have to do initializing web apps step, because package has dependency of Telegram Web App context.

2️⃣ Install by running: npm i @vkruglikov/react-telegram-web-app --save. Today we support React^18.

3️⃣ Try it out by writing code.

import { MainButton, useShowPopup } from '@vkruglikov/react-telegram-web-app';

const Content = () => {
  const showPopup = useShowPopup();

  const handleClick = () =>
    showPopup({
      message: 'Hello, I am popup',
    });

  return <MainButton text="SHOW POPUP" onClick={handleClick} />;
};

✨ Short Documentation

Components

MainButton - The component controls the main button, which is displayed at the bottom of the Web App in the Telegram interface.
BackButton - This component controls the back button, which can be displayed in the header of the Web App in the Telegram interface.

WebAppProvider - WebAppProvider provide context with WebApp for components and hooks. You can try to pass an object with options

import { WebAppProvider, MainButton, BackButton } from '@vkruglikov/react-telegram-web-app';

<WebAppProvider
  options={{
    smoothButtonsTransition: true,
  }}
>
  {/** Use components inside provider */}
  <MainButton {...} />
  <BackButton {...} />
</WebAppProvider>

Hooks

useShowPopup - This hook provides showPopup function that shows a native popup.
useHapticFeedback - This hook provides impactOccurred, notificationOccurred and selectionChanged functions that controls haptic feedback.
useThemeParams - This hook provides colorScheme and themeParams object.
useScanQrPopup - This hook provides showScanQrPopup and closeScanQrPopup functions.
useReadTextFromClipboard - This hook provides readTextFromClipboard function.
useSwitchInlineQuery - This hook provides switchInlineQuery function.
useExpand - This hook provides isExpanded state, and expand() handle.
useCloudStorage - This hook provides CloudStorage object as Promise functions
useInitData - This hook provides InitDataUnsafe and InitData object
useWebApp - This hook just provides native WebApp object

🛣 Roadmap

Here's what's coming up:

In the future, We would like to use us components also in Web application, without Telegram context.
All Telegram WebApp feature support
Main Telegram WebApp feature support