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
• [x] 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