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:
🥂 License
MIT
💻👞🙊📚 Join to discussions
Create discussions, ask questions, share experiences and discuss ideas with everyone together
https://github.com/altiore/twa/discussions