Skip to content

vkruglikov/react-telegram-web-app

Repository files navigation

React components for Telegram MiniApp

npm types GitHub Actions CI License Tests

🔴 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

Contributors

As always, thanks to our amazing contributors!

Valentin Kruglikov Aleksey Savin Alexandr Gotovtsev

Made with contributors.

Contributing

🥂 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