https://github.com/demark-pro/next-twa
A simple and efficient npm package to integrate Telegram Web Apps into your Next.js applications
https://github.com/demark-pro/next-twa
nextjs react telegram telegram-web-app
Last synced: 5 months ago
JSON representation
A simple and efficient npm package to integrate Telegram Web Apps into your Next.js applications
- Host: GitHub
- URL: https://github.com/demark-pro/next-twa
- Owner: demark-pro
- License: mit
- Created: 2024-10-19T11:11:57.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2024-10-21T18:58:36.000Z (over 1 year ago)
- Last Synced: 2025-10-11T05:13:36.535Z (9 months ago)
- Topics: nextjs, react, telegram, telegram-web-app
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/next-twa
- Size: 1.05 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Telegram WebApp for NextJS
A simple and efficient npm package to integrate Telegram Web Apps into your Next.js applications. This package provides seamless access to Telegram's API, enabling you to create interactive web experiences directly inside Telegram.
## Features:
- Easy integration with Next.js
- Access user data and chat information securely
- Simplified API calls to Telegram
## Live Demo
Telegram Bot [@nexttwa_bot](https://t.me/nexttwa_bot/app) (in development)
## Getting started
### Installation
```sh
npm i next-twa --save
```
### Usage
Import `NextTWAProvider` from the library
```js
import { NextTWAProvider } from 'next-twa';
```
Then wrap your code in the `NextTWAProvider` component to make it available to all components. `next-twa` will take care of the back button
```js
```
Now you can call `useNextTWA` in any component.
```js
import { useNextTWA } from 'next-twa';
export const MyComponent = () => {
const { isReady, app, startAppValue } = useNextTWA();
return
Hi, {app?.initDataUnsafe.user?.username}
;
};
```
### Hooks
`useNextTWA(): UseNextTWAReturn` - Main hook for the app
`useTelegramInitData(): WebAppInitData` - Hook to get the initial data from the Telegram Web Apps API already parsed.
## Example
```js
'use client';
import {
NextTWAProvider,
useNextTWA,
OnStartAppHandler,
useTelegramInitData,
} from 'next-twa';
const App = () => {
const { isReady, app, startAppValue } = useNextTWA();
const initData = useTelegramInitData();
if (!isReady) return
Loading...
;
return (
StartAppValue: {startAppValue}
{initData &&
Object.entries(initData).map(([key, value]) => (
{key}: {JSON.stringify(value)}
))}
{
app?.showAlert('Hi!');
}}
>
Show Alert
);
};
export default function Home() {
const handleStartApp: OnStartAppHandler = startParam => {
if (startParam) {
// Do something: redirect or extract data from `start_param`
// The returned value will be written to `startAppValue`.
return { foo: 'bar' };
}
return 'string or anything';
};
return (
);
}
```
## TODO
- Add Docs
- Add Tests