React components for Telegram WebApp
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 React from 'react';
import { MainButton, useShowPopup } from '@vkruglikov/react-telegram-web-app';
const App = () => {
const showPopup = useShowPopup();
return (
<>
Some page content...
<MainButton
text="SHOW POPUP"
onClick={() => {
showPopup({
message: "Hello, I'am showPopup handle",
});
}}
/>
</>
);
};
- 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.
- useShowPopup - The hook that provided showPopup function that shows a native popup.
- useHapticFeedback -
This hook that provided
impactOccurred
,notificationOccurred
andselectionChanged
functions that controls haptic feedback. - useThemeParams -
This hook that provided
colorScheme
andthemeParams
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.
You can try open demo telegram bot with React WebApp @react_telegram_web_app_bot.
Also, you can look demo source code.