https://github.com/andoghevian/tg-screen
Telegram Mini App screen React component
https://github.com/andoghevian/tg-screen
declarative-programming react react-components reactjs telegram-mini-app telegram-mini-apps
Last synced: 6 days ago
JSON representation
Telegram Mini App screen React component
- Host: GitHub
- URL: https://github.com/andoghevian/tg-screen
- Owner: AndoGhevian
- License: mit
- Created: 2024-11-15T13:30:02.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2024-12-24T07:59:15.000Z (about 1 year ago)
- Last Synced: 2025-10-28T01:12:50.406Z (4 months ago)
- Topics: declarative-programming, react, react-components, reactjs, telegram-mini-app, telegram-mini-apps
- Language: TypeScript
- Homepage: https://t.me/tg_screen_demo_bot/tg_screen_demo
- Size: 346 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# tg-screen
**\** is a simple, declarative React Component designed to simplify bootstrapping the native functionality of Telegram **mini app screens** without deep diving into **non declarative** Telegram React SDK.
## Live Demo
Check out a live demo of the mini app: [@tg_screen_demo_bot](https://t.me/tg_screen_demo_bot).
You can find the complete codebase for the demo in [`examples/demo`](./examples/demo).
## Install
`npm install tg-screen`
> Note: This package requires @telegram-apps/sdk-react version ^2.0.0 or higher. If it's not already installed, you can add it using:
`npm install @telegram-apps/sdk-react@^2.0.0`
## Usage
Here's a quick example to get you started:
```typescript
import { TgScreen } from 'tg-screen'
function App() {
const colors = {
headerColor: "#404c9e", // violet
backgroundColor: "#ffffff", // white
bottomBarColor: "#d3b92f", // yellow
}
return (
alert("Settings")}
onBack={() => alert("Back")}
mainButtonProps={{
onClick: () => alert("main button clicked"),
}}
secondaryButtonProps={{
onClick: () => alert("secondary button clicked"),
}}
>
Hello World!
)
}
export default App
```
## TypeScript Support
The package comes with TypeScript documentation, so you can benefit from type safety and IntelliSense. The API is designed to be simple and intuitive, making it easy to get started.
## Issues
Encountered a bug or have a feature request? Please let me know by [opening an issue](https://github.com/AndoGhevian/tg-screen/issues). Your feedback is greatly appreciated and helps me improve the library!
## License
This project is licensed under the MIT License.