react telegram web app
v2.1.9
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 { 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} />;};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>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
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
As always, thanks to our amazing contributors!
Made with contributors.
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
