• Stars
    star
    125
  • Rank 286,335 (Top 6 %)
  • Language
    JavaScript
  • Created over 5 years ago
  • Updated 3 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Simple and powerful keyboard builder for Telegram Bots

Telegram Keyboard Builder

Simple and powerful reply and inline keyboard builder for Telegram Bots

Installation

Just use npm

npm i telegram-keyboard --save

or yarn

yarn add telegram-keyboard

Example of use in Telegraf

const Telegraf = require('telegraf')
const { Keyboard } = require('telegram-keyboard')

const bot = new Telegraf(process.env.BOT_TOKEN)

bot.on('text', async (ctx) => {
  const keyboard = Keyboard.make([
    ['Button 1', 'Button 2'], // First row
    ['Button 3', 'Button 4'], // Second row
  ])

  await ctx.reply('Simple built-in keyboard', keyboard.reply())
  await ctx.reply('Simple inline keyboard', keyboard.inline())
})

Reply (build-in) keyboard

Example

const { Keyboard } = require('telegram-keyboard')

const keyboard = Keyboard.make(['Button 1', 'Button 2']).reply()

// or using shortcut
const keyboard = Keyboard.reply(['Button 1', 'Button 2'])

console.log(keyboard)

Result

{
  "reply_markup": {
    "resize_keyboard": true,
    "keyboard": [
      [
        "Button 1",
        "Button 2"
      ]
    ]
  }
}

Inline keyboard

Example

const { Keyboard } = require('telegram-keyboard')

const keyboard = Keyboard.make(['Button 1', 'Button 2']).inline()

// or using shortcut
const keyboard = Keyboard.inline(['Button 1', 'Button 2'])

console.log(keyboard)

Result

{
  "reply_markup": {
    "resize_keyboard": true,
    "inline_keyboard": [
      [
        {
          "text": "Button 1",
          "callback_data": "Button 1"
        },
        {
          "text": "Button 2",
          "callback_data": "Button 2"
        }
      ]
    ]
  }
}

Inline keyboard with custom callback data

Example

const { Keyboard, Key } = require('telegram-keyboard')

const keyboard = Keyboard.make([
  Key.callback('Button 1', 'action1'),
  Key.callback('Button 2', 'action2'),
]).inline()

console.log(keyboard)

Result

{
  "reply_markup": {
    "resize_keyboard": true,
    "inline_keyboard": [
      [
        {
          "text": "Button 1",
          "callback_data": "action1"
        },
        {
          "text": "Button 2",
          "callback_data": "action2"
        }
      ]
    ]
  }
}

Fixed columns keyboard

Example

const { Keyboard } = require('telegram-keyboard')

const keyboard = Keyboard.make(['1', '2', '3', '4', '5'], {
  columns: 2,
}).reply()

console.log(keyboard)

Result

{
  "reply_markup": {
    "resize_keyboard": true,
    "keyboard": [
      ["1", "2"],
      ["3", "4"],
      ["5"]
    ]
  }
}

Calculated columns keyboard

Example

const { Keyboard } = require('telegram-keyboard')

const keyboard = Keyboard.make(['1', '2', '3', '4', '5'], {
  wrap: (row, index, button) => Math.random() > 0.5
}).reply()

console.log(keyboard)

Result

{
  "reply_markup": {
    "resize_keyboard": true,
    "keyboard": [ // different every time
      ["1", "2"],
      ["3"],
      ["4"],
      ["5"]
    ]
  }
}

Pattern

Example

In this example pattern: [3, 1, 1] means that the first row will have 3 buttons, the second - 1, the third - 1 and all the other buttons in the last row

const { Keyboard } = require('telegram-keyboard')

const keyboard = Keyboard.make([1, 2, 3, 4, 5, 6, 7, 8, 9, 10], {
    pattern: [3, 1, 1]
}).reply()

console.log(keyboard)

Result

{
  "reply_markup": {
    "resize_keyboard": true,
    "keyboard": [
      ["1", "2", "3"],
      ["4"],
      ["5"],
      ["6", "7", "8", "9", "10"]
    ]
  }
}

Custom filter function

Default filter function is button => !button.hide but you can pass your filtering function

Example

const { Keyboard } = require('telegram-keyboard')

const keyboard = Keyboard.make([1, 2, 3, 4, 5, 6, 7, 8, 9, 10], {
    columns: 2,
    filter: btn => btn % 2
}).reply()

console.log(keyboard)

Result

{
  "reply_markup": {
    "resize_keyboard": true,
    "keyboard": [
      ["1", "3"],
      ["5", "7"],
      ["9"]
    ]
  }
}

Filter after build

Example

const { Keyboard } = require('telegram-keyboard')

const keyboard = Keyboard.make([1, 2, 3, 4, 5, 6, 7, 8, 9, 10], {
    columns: 2,
    filter: btn => btn % 2,
    filterAfterBuild: true
}).reply()

console.log(keyboard)

Result

{
  "reply_markup": {
    "resize_keyboard": true,
    "keyboard": [
      ["1"],
      ["3"],
      ["5"],
      ["7"],
      ["9"]
    ]
  }
}

Flat buttons

Example

const { Keyboard } = require('telegram-keyboard')

const keyboard = Keyboard.make([[1, 2], [3, 4, 5, 6], [7, 8, 9, 10]], {
    flat: true,
    columns: 3,
}).reply()

console.log(keyboard)

Result

{
  "reply_markup": {
    "resize_keyboard": true,
    "keyboard": [
      ["1", "2", "3"],
      ["4", "5", "6"],
      ["7", "8", "9"],
      [ "10"]
    ]
  }
}

Combine keyboards

Example

const { Keyboard } = require('telegram-keyboard')

const keyboard1 = Keyboard.make(['1', '2', '3', '4'], {
  columns: 2
})
const keyboard2 = Keyboard.make(['5', '6', '7', '8'])

const keyboard = Keyboard.combine(keyboard1, keyboard2).reply()

console.log(keyboard)

Result

{
  "reply_markup": {
    "resize_keyboard": true,
    "keyboard": [
      ["1", "2"],
      ["3", "4"],
      ["5", "6", "7", "8"]
    ]
  }
}

Construct keyboard

Example

Full example in examples/pagination.js

Instead of writing a separate function to create the keyboard like this:

const createKeyboard = page => {
  return Keyboard
    .make(/* ... */)
}

You can pass function to Keyboard.make method. The function must return either an array of buttons or another keyboard. After that with the keyboard.construct(someArgs) method you can recreate it

const { Keyboard } = require('telegram-keyboard')

const items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
const itemsPerPage = 4

const keyboard = Keyboard.make((page) => {
    const pageItems = items.slice(page * itemsPerPage, page * itemsPerPage + itemsPerPage)
    
    return Keyboard.combine(
        Keyboard.make(pageItems, { columns: 3 }),
        Keyboard.make([
            Key.callback('<----', 'left', page === 0),
            Key.callback('---->', 'right', page === 2),
        ])
    )
})

// remake keyboard with some other arguments
console.log(keyboard.construct(0).reply())
console.log(keyboard.construct(1).reply())

More examples you may find in examples

More Repositories

1

This-Repo-Has-1750-Stars

Yes, it's true 💜
JavaScript
1,746
star
2

how-to-install

The collection of instructions for installing programs and utilities for Linux, Windows, MacOS, etc. Unfortunately the project has been abandoned, but I still think it's a good idea
JavaScript
36
star
3

rays

A logic circuit simulator using rays system. Mechanics similar to Minecraft's Redstone. Yes, you can actually create an ALU on this
JavaScript
15
star
4

telegraf-broadcast

Send broadcast messages to all of your bot users/groups/channels for Telegraf.js v3.38 based on Bull Queue
JavaScript
12
star
5

planck-renderer

A small library for rendering objects from the planck-js library
JavaScript
12
star
6

canvas-syntax-highlight

Syntax highlighting on the canvas
JavaScript
8
star
7

console-magic

Raycasting in DevTools Console and not only. https://habr.com/ru/post/452442/
JavaScript
7
star
8

binance-whales

JavaScript
6
star
9

ethers-abitype

Improves ethers.js with strict ABI typing
TypeScript
6
star
10

telegraf-better-stage

Telegraf.js stage with sequential transition between scenes
JavaScript
4
star
11

react-websocket-components

React Server Components but better
JavaScript
3
star
12

minecraft-mob-settings

Java
2
star
13

hyperchains

A list of chains supported by Hyperlane protocol
TypeScript
2
star
14

RealFont

HTML
2
star
15

flood-it

HTML
2
star
16

pump-detector

JavaScript
2
star
17

bomberidze

JavaScript
2
star
18

neonabyss-items

JavaScript
1
star
19

dl-today

JavaScript
1
star
20

simple-chat

Express.js + WebSocket + Mongoose Chat
JavaScript
1
star
21

oa-stat

JavaScript
1
star
22

mineflayer-pipeline

JavaScript
1
star
23

sketches

Just a collection of small demos I made. From weird clocks and simple spring physics to Verlet integration
JavaScript
1
star
24

twitter-nes

CSS
1
star
25

kod

JavaScript
1
star
26

pixel-face

JavaScript
1
star
27

spirograph

JavaScript
1
star
28

terminal-bot

Manage your VPS via Telegram bot
JavaScript
1
star
29

realpeha.github.io

1
star
30

real-canvas

Simple realtime drawing app. Express.JS + WebSocket
JavaScript
1
star
31

nengi-bun-server-adapter

Bun web socket server network adapter for nengi v2
TypeScript
1
star
32

slavka

JavaScript
1
star