grammyjs/components

Ready-to-use components for getting user input.

🪄 Components for grammY

🚧 Under development. Please do not use in production yet

Set of useful components for grammY.

Documentation »

Install

Node

// TODO

Deno

// TODO

Usage

// TODO: add imports after publishing

// Extend bot context type
export type MyContext = Context & WebAppDataFlavor;

// Create a bot, specify the extended context
const bot = new Bot<MyContext>(""); // <-- put your authentication token between the ""

bot.command("start", async (ctx) => {
  const keyboard = new Keyboard();

  // Sending the component to the user
  keyboard.webApp("Click to pick", new TimePicker().build());

  await ctx.reply("Hey, pick a time!", {
    reply_markup: keyboard,
  });
});

// Handle time selected by a user
bot.filter(TimePicker.match(), (ctx) => {
  const { time } = ctx.webAppData;

  return ctx.reply(`You chose ${time.getUTCHours()}:${time.getUTCMinutes()}`);
});

bot.start();

Component List

• Color Picker let select a color.
• Date Picker let select a date.
• QR Scanner let scan a QR.
• Time Picker let select a time.

Repository contents

• Packages
  • components - Package that provides all the components
    • web - Module that creates buttons of web components
    • keyboard - Module that implements keyboard components
• Apps
  • web-components-app - Web application that implements web components
  • playground-bot - Demo bot that uses all components