{"id":22088648,"url":"https://github.com/andoghevian/tg-screen","last_synced_at":"2026-02-21T14:33:09.838Z","repository":{"id":263115393,"uuid":"889031484","full_name":"AndoGhevian/tg-screen","owner":"AndoGhevian","description":"Telegram Mini App screen React component","archived":false,"fork":false,"pushed_at":"2024-12-24T07:59:15.000Z","size":354,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-28T01:12:50.406Z","etag":null,"topics":["declarative-programming","react","react-components","reactjs","telegram-mini-app","telegram-mini-apps"],"latest_commit_sha":null,"homepage":"https://t.me/tg_screen_demo_bot/tg_screen_demo","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AndoGhevian.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-11-15T13:30:02.000Z","updated_at":"2025-01-12T04:30:24.000Z","dependencies_parsed_at":"2025-07-24T19:31:28.623Z","dependency_job_id":"f7f63f33-4190-4b05-bc81-3f85b8bc0681","html_url":"https://github.com/AndoGhevian/tg-screen","commit_stats":null,"previous_names":["andoghevian/tg-screen"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/AndoGhevian/tg-screen","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndoGhevian%2Ftg-screen","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndoGhevian%2Ftg-screen/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndoGhevian%2Ftg-screen/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndoGhevian%2Ftg-screen/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AndoGhevian","download_url":"https://codeload.github.com/AndoGhevian/tg-screen/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndoGhevian%2Ftg-screen/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29683991,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-21T14:31:22.911Z","status":"ssl_error","status_checked_at":"2026-02-21T14:31:22.570Z","response_time":107,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["declarative-programming","react","react-components","reactjs","telegram-mini-app","telegram-mini-apps"],"created_at":"2024-12-01T02:09:10.926Z","updated_at":"2026-02-21T14:33:09.822Z","avatar_url":"https://github.com/AndoGhevian.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# tg-screen\n\n**\\\u003cTGScreen\\/\\\u003e** 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.\n\n## Live Demo\n\nCheck out a live demo of the mini app: [@tg_screen_demo_bot](https://t.me/tg_screen_demo_bot).\n\nYou can find the complete codebase for the demo in [`examples/demo`](./examples/demo).\n\n## Install\n\n`npm install tg-screen`\n\u003e 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:\n`npm install @telegram-apps/sdk-react@^2.0.0`\n\n## Usage\n\nHere's a quick example to get you started:\n\n```typescript\nimport { TgScreen } from 'tg-screen'\n\nfunction App() {\n  const colors = {\n    headerColor: \"#404c9e\", // violet\n    backgroundColor: \"#ffffff\", // white\n    bottomBarColor: \"#d3b92f\", // yellow\n  }\n\n  return (\n    \u003cTgScreen\n      headerColor={colors.headerColor}\n      backgroundColor={colors.backgroundColor}\n      bottomBarColor={colors.bottomBarColor}\n      allowSwipeExpand={true}\n      autoExpand={true}\n      closeConfirmation={true}\n      onSettings={() =\u003e alert(\"Settings\")}\n      onBack={() =\u003e alert(\"Back\")}\n      mainButtonProps={{\n        onClick: () =\u003e alert(\"main button clicked\"),\n      }}\n      secondaryButtonProps={{\n        onClick: () =\u003e alert(\"secondary button clicked\"),\n      }}\n    \u003e\n      \u003cp style={{color: \"#ffffff\"}}\u003eHello World!\u003c/p\u003e\n    \u003c/TgScreen\u003e\n  )\n}\n\nexport default App\n```\n\n##  TypeScript Support\n\nThe 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.\n\n## Issues\n\nEncountered 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!\n\n## License\n\nThis project is licensed under the MIT License.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandoghevian%2Ftg-screen","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandoghevian%2Ftg-screen","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandoghevian%2Ftg-screen/lists"}