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

SettingsButton Settings button (mvp)

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

Contributors

As always, thanks to our amazing contributors!

Made with contributors.

Contributing

Read up about its 🛣 Roadmap and official documentation Telegram Mini Apps
Have questions? Check out our examples, duscussions and issues
Fork and Contribute your own modifications

🥂 License

MIT

💻👞🙊📚 Join to discussions

Create discussions, ask questions, share experiences and discuss ideas with everyone together

https://github.com/vkruglikov/react-telegram-web-app/discussions