telegram-announcement-components

this library provides UI components and utility function to help you display telegram announcements easily.

installation

pnpm add telegram-announcement-components @emotion/react

basic usage

import {
  AnnouncementList,
  MarkAllAsReadButton,
} from 'telegram-announcement-components';

const App = () => {
  const announcementRet = useMyAnnouncementQuery();

  return (
    <div>
      <MarkAllAsReadButton announcements={oldAnnouncements} />
      <AnnouncementList announcements={announcementRet.data} />
    </div>
  );
};

customize configure

import {
  AnnouncementList,
  AnnouncementConfigProvider,
} from 'telegram-announcement-components';

const App = () => {
  const t = useTranslation();
  const announcementRet = useMyAnnouncementQuery();

  return (
    <div>
      <AnnouncementConfigProvider
        t={t}
        title="Veno Telegram channel"
        subtitle="Veno Finance announcements"
        defaultAvatar={<img src="..." width="24px" height="24px" />}
        announcementDateFormatter={(date) => {
          return 'Time:' + new Date(date * 1000).toLocaleString();
        }}
      >
        <AnnouncementList
          announcements={announcementRet.data}
        ></AnnouncementList>
      </AnnouncementConfigProvider>
    </div>
  );
};

customize css

/* the read message */
.t-announcement_item-container.t-announcement_item-container--read {
  background-color: blue;
}
/* the unread message */
.t-announcement_item-container:not(.t-announcement_item-container--read) {
  background-color: red;
}

deep customization

using parseAnnouncementBody(message) to get parsed announcement content directly:

import {
  parseAnnouncementBody,
  AnnouncementBodyComponents,
} from 'telegram-announcement-components';

const App = () => {
  const announcementRet = useMyAnnouncementQuery();
  return (
    <div>
      {announcementRet.data?.map((announcement, i) => {
        return (
          <div key={i} style={/* ... */}>
            {parseAnnouncementBody(announcement, {
              components: announcementComponents,
            })}
          </div>
        );
      })}
    </div>
  );
};

const announcementComponents: Partial<AnnouncementBodyComponents> = {
  Bold: ({ children }) => {
    return (
      <div
        css={{
          display: 'inline-box',
          fontWeight: '900',
          textShadow: '2px 2px #ff0000',
        }}
      >
        {children}
      </div>
    );
  },
  Link: ({ children, href }) => {
    return (
      <a
        href={href}
        style={{
          textDecoration: 'underline',
        }}
      >
        {children}
      </a>
    );
  },
};

customize read button

import { useReadState } from 'telegram-announcement-components';

const useMarkAllAsRead = () => {
  const [readState, setReadState] = useReadState();
  const announcementRet = useMyAnnouncementQuery();

  return () => {
    if (announcementRet.data) {
      setReadState(
        announcementRet.data.map((item) => item.message_id),
        true,
      );
    }
  };
};

export const MyReadAllButton = () => {
  const readAll = useMarkAllAsRead();
  return <button onClick={readAll}>my button</button>;
};

Development

# build and generate final assets in <root>/dist
pnpm run build

# start dev server
pnpm run dev

publish package

1. update the version in package.json

{
  "version": "0.0.12"
  // ...
}

2. push your changes to this repo
3. create a new published release here
4. check if the publishing action success here