Skip to main content

· One min read
Vitali Haradkou

The new telegraph component was landed and available on npm.js site.

analytics

This components listen any chat iteraction with user and emits events with analytics prefix.

Analytics components also defines PluginAPI to write a custom extensions for analytics. See docs how to work with plugins.

Installation:

npm i @tlgr/analytics

How it works:

example.ts
import { Analytics } from "@tlgr/analytics";
import { Console } from "@tlgr/analytics/plugins";
import { Telegraf } from "telegraf";

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

const analytics = new Analytics(bot, new Console());

analytics.enable(true); // true - launch imidiately
bot.start((ctx) => {
// send message
ctx.reply(/** reply message */);
});

// fires event with start command, and reply text as param.

JSX support for fmt package.

For now, when you want to reply message, you can use JSX markup. See docs how to enable JSX support

Full Changelog available at link: https://github.com/vitalics/Telegraph/blob/main/releases/v1.4.0.md

· One min read
Vitali Haradkou

Version 1.2 was missed due to releasing issue.

The new telegraph component was landed and available on npm.js site.

fmt

This is not actually a "component" but it includes helpful formatting

Installation:

npm i @tlgr/fmt

How it works:

example.ts
import { fmt, bold } from "@tlgr/fmt";
import { Telegraf } from "telegraf";

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

bot.start((ctx) => {
// send message
ctx.reply(...fmt(`Hello with ${bold("bold")} message`)); // hello with bold message
});

bot.launch();

Full Changelog available at link: https://github.com/vitalics/Telegraph/blob/main/releases/v1.3.0.md

Made with ❤️ from vitalics

· One min read
Vitali Haradkou

The new telegraph components are landed and available on npm.js site.

New Components:

render item and navigation (< and >) symbols.

Can render text , video, audio, animation and photo messages.

Installation:

npm i @tlgr/carousel

Poll

Poll ask user to answer a question.

Installation:

npm i @tlgr/poll

Quiz

Quiz is similar to poll but have correct_option_id which marks correct answer id.

Installation:

npm i @tlgr/quiz

Changes

Button

Introduce button keyboard component.

New Keyboard buttons. See types:

  • location
  • phone
  • poll
  • quiz

Component

New Component: Keyboard

Full Changelog available at link: https://github.com/vitalics/Telegraph/blob/main/releases/v1.1.0.md

Made with ❤️ from vitalics

· One min read
Vitali Haradkou

Finally i made up common components for Telegram. Currently there is not a lot of components:

Date picker demo

See the video below:

Installation

Button

pnpm:

pnpm add @tlgr/button@1.0.0

yarn:

yarn add @tlgr/button@1.0.0

npm:

npm i @tlgr/button@1.0.0

Date Picker

pnpm:

pnpm add @tlgr/date-picker@1.0.0

yarn:

yarn add @tlgr/date-picker@1.0.0

npm:

npm i @tlgr/date-picker@1.0.0