@tlgr/fmt NPM | npm.io

Fmt

Formatter for telegram context.

Working with JSX

install preact dependency.

npm i preact

update tsconfig.json file(if necessary) and add jsx support:

{
  "compilerOptions": {
    // tsconfig options
      "jsx": "react",
      "jsxFactory": "h"
    }
}

Update file names(.js -> .jsx or .ts -> .tsx)
Enjoy using JSX :)

Example:

import { h, Fragment } from 'preact';
import {render, Bold} from '@tlgr/fmt/default';

const bot = new Telegraf('<API TOKEN>');

bot.start(ctx => {
  ctx.reply(...render(
    <Fragment>
        <Bold>Some text is bolded</Bold>
    </Fragment>
))
})

bot.launch();

Reply context

string - use it in case of using template string.
react - use it in case of using JSX components.

Also its important to use spread operator for render function since this function is returns tuple with raw text and it's modifications (like bold, mention, etc.)

markdown (deprecated) - use this package when you want to reply with markdown V2.
html (deprecated) - use this package when you want to reply with HTML.

Example with react:

import { h, Fragment } from 'preact';
import { render, Bold } from '@tlgr/fmt/react';

const bot = new Telegraf('<API TOKEN>');

bot.start(ctx => {
  // NOTE: use spread operator, since render returns raw string with formatting
  ctx.reply(...render(
    <Fragment>
        <Bold>Some text is bolded</Bold>
    </Fragment>
  ), {}) // others Telegram reply options
})

bot.launch();

Example with string:

import {render, bold} from '@tlgr/fmt/string';

const bot = new Telegraf('<API TOKEN>');

bot.start(ctx => {
  // NOTE: not use spread operator, since render returns raw string
  ctx.reply(...render(
   `${bold('this text is bolded')}`
  ))
})

bot.launch();