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️⃣  Install by running: npm i @altiore/twa -SE. We support React^18.

2️⃣  Try it out by writing code.

import { MainButton, useShowPopup } from '@altiore/twa';

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.

• TwaLoader - This component helps to show content dependent on was TWA application loaded or not

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

  import { WebAppProvider, MainButton, BackButton } from '@altiore/twa';
  
  <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
• useVersionAtLeast - This hook provides isVersionAtLeast function result which is always boolean
• useTwa - This hook provides boolean values indicating whether the Telegram Web App is ready for use (loaded) or not (still loading).
• useWebApp - This hook just provides native WebApp object

🛣 Roadmap

Here's what's coming up:

• [ ] All Telegram WebApp feature support.
• [x] Main Telegram WebApp feature support.
• [x] TwaLoader component to better support TWA and non TWA applications

🥂 License

MIT

💻👞🙊📚 Join to discussions

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

https://github.com/altiore/twa/discussions