React components for Telegram WebApp

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

Also, you can look demo source code.

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 React from 'react';
import { MainButton, useShowPopup } from '@vkruglikov/react-telegram-web-app';

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

  return (
    <>
      Some page content...
      <MainButton
        text="SHOW POPUP"
        onClick={() => {
          showPopup({
            message: "Hello, I'am showPopup handle",
          });
        }}
      />
    </>
  );
};

• 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.
• useShowPopup - The hook that provided showPopup function that shows a native popup.
• useHapticFeedback - This hook that provided impactOccurred, notificationOccurred and selectionChanged functions that controls haptic feedback.
• useThemeParams - This hook that provided colorScheme and themeParams object.
• useScanQrPopup - This hook that provided showScanQrPopup and closeScanQrPopup functions.

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.

MIT