Skip to content

telegum/tgx

Repository files navigation

TGX — Telegram JSX

npm version coverage

Implementation of jsx-runtime to create Telegram messages using JSX.

Usage

Note

This package only provides the runtime for JSX that just transforms JSX syntax into TGX elements. What will be done with these elements is up to you or other packages.

  1. Install the package:

    npm install @telegum/tgx
  2. Update JSX-related options in your tsconfig.json:

    {
      "compilerOptions": {
        // ...
        "jsx": "react-jsx",
        "jsxImportSource": "@telegum/tgx"
        // ...
      }
    }
  3. Use JSX in your code:

    // example.jsx
    import { bot } from 'example-telegram-framework'
    
    function UserCard({ id, name }) {
      return (
        <>
          <b>
            Your name:
            {name}
          </b>
          <i>
            Your ID:
            {id}
          </i>
        </>
      )
    }
    
    bot.on('message', (ctx) => {
      ctx.reply(<UserCard id={ctx.user.id} name={ctx.user.first_name} />)
    })