Добавляем Telegram Widgets в React-приложение

В этой статье я расскажу что такое Telegram Widgets, зачем они нужны и как максимально просто добавить их в своё React приложение.

Что такое Telegram Widgets?

Telegram Widgets - API от Telegram, которое позволяет быстро добавить на сайт кнопку "Поделиться", встроить посты из публичных каналов или групп. С его помощью пользователи также могут авторизоваться через Telegram или просматривать обсуждения прямо на сайте.

Проблема с использованием в React приложенияx

Дело в том что Telegram Widget - это script-тег вида:

<script
  async
  src="https://telegram.org/js/telegram-widget.js?22"
  data-telegram-post="alexey_baranov_dev/61"
  data-width="100%"
></script>

Он инициализируется и добавляет в родительский контейнер iframe, который рендерит контент с нужными параметрами.

Из-за этого с виджетами очень неудобно работать в декларативном стиле, присущем React-компонентам. Поэтому мне пришлось написать небольшую обёртку над скриптами, позволяющую:

• Подписываться на события загрузки;
• Отслеживать ошибки;
• В удобном декларативном стиле пробрасывать необходимые свойства виджетов;
• Корректно обрабатывать изменения свойств и перерендеры компонентов;

А так как официального React-пакета для виджетов нет и не предвиделось, поэтому я решил оформить её в виде npm-пакета @baranov-guru/react-telegram-widgets.

Что делает пакет @baranov-guru/react-telegram-widgets?

Сейчас он поддерживает два типа Telegram-виджетов:

• Комментарии (TelegramDiscussionWidget) — возможность встроить обсуждение постов прямо на сайте.
• Посты из ТГ-каналов (TelegramPostWidget) — удобный способ вставить отдельный пост из публичного Telegram-канала или группы.

Установка

npm install @baranov-guru/react-telegram-widgets

Примеры использования

Виджет комментариев (TelegramDiscussionWidget)

import { TelegramDiscussionWidget } from "@baranov-guru/react-telegram-widgets";

function App() {
  return (
    <div>
      <h1>Discussion</h1>
      <TelegramDiscussionWidget
        discussion="alexey_baranov_dev"
        commentsLimit={10}
        height={400}
        color="#ff0000"
        colorful={true}
        dark={true}
        onLoad={() => console.log("Comments loaded!")}
        onError={(error) => console.error("Failed to load comments:", error)}
      />
    </div>
  );
}

Этот компонент можно встроить под статьёй или любым другим контентом. Все комментарии будут сохраняться в Telegram и синхронизироваться между пользователями.

Встраивание поста (TelegramPostWidget)

import { TelegramPostWidget } from "@baranov-guru/react-telegram-widgets";

const App = () => (
  <TelegramPostWidget
    post="alexey_baranov_dev/61"
    userpic
    color="#ff0000"
    onLoad={() => console.log("Post loaded!")}
    onError={(error) => console.error("Failed to load post:", error)}
    className="w-full flex p-2"
  />
);

Просто указываешь название канала и ID поста — и он появляется на странице.

Пример встроенных постов можно посмотреть на главной странице этого блога.

Документация

Все доступные пропсы и примеры есть в npm-профиле пакета. Там всё кратко и по делу.

Поддержите проект ⭐️

Если вам пригодился этот пакет — буду рад, если поставите ему звёздочку на GitHub. Это поможет другим разработчикам найти его.

Спасибо, что дочитали. Если будут вопросы — пишите прямо в TelegramDiscussionWidget под постом ⬇️