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
andselectionChanged
functions that controls haptic feedback. - useThemeParams -
This hook provides
colorScheme
andthemeParams
object. - useScanQrPopup -
This hook provides
showScanQrPopup
andcloseScanQrPopup
functions. - useReadTextFromClipboard -
This hook provides
readTextFromClipboard
function. - useSwitchInlineQuery -
This hook provides
switchInlineQuery
function. - useExpand -
This hook provides
isExpanded
state, andexpand()
handle. - useCloudStorage -
This hook provides
CloudStorage
object as Promise functions - useInitData -
This hook provides
InitDataUnsafe
andInitData
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
Create discussions, ask questions, share experiences and discuss ideas with everyone together
https://github.com/vkruglikov/react-telegram-web-app/discussions