vkruglikov
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️⃣ 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
showPopupfunction that shows a native popup. - useHapticFeedback -
This hook provides
impactOccurred,notificationOccurredandselectionChangedfunctions that controls haptic feedback. - useThemeParams -
This hook provides
colorSchemeandthemeParamsobject. - useScanQrPopup -
This hook provides
showScanQrPopupandcloseScanQrPopupfunctions. - useReadTextFromClipboard -
This hook provides
readTextFromClipboardfunction. - useSwitchInlineQuery -
This hook provides
switchInlineQueryfunction. - useExpand -
This hook provides
isExpandedstate, andexpand()handle. - useCloudStorage -
This hook provides
CloudStorageobject as Promise functions - useInitData -
This hook provides
InitDataUnsafeandInitDataobject - useWebApp -
This hook just provides native
WebAppobject
🛣 Roadmap
Here's what's coming up:
- <input disabled="" type="checkbox"> In the future, We would like to use us components also in Web application, without Telegram context.
- <input disabled="" type="checkbox"> All Telegram WebApp feature support
- <input checked="" disabled="" type="checkbox"> Main Telegram WebApp feature support
Contributors
As always, thanks to our amazing contributors!
Made with contributors.
Contributing
- 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
🥂 License
💻👞🙊📚 Join to discussions
Create discussions, ask questions, share experiences and discuss ideas with everyone together
https://github.com/vkruglikov/react-telegram-web-app/discussions