README.md

@tok/telegram-ui

This package offers a convenient wrapper around the @twa-dev/sdk, providing Vue-like components and use-case solutions for Popups, MainButton, BackButton, and Theme integration.

Components

1. BackButton
2. MainButton
3. Sticker
4. TelegramPopup

Use

useTelegramSdk

Returns whole instance of @twa-dev/sdk

Usage

<script setup lang="ts">
import { useTelegramSdk } from '@tok/telegram-ui/use/sdk';

const sdk = useTelegramSdk();

sdk.HapticFeedback.impactOccurred('light');
// ... and so on
</script>

useTheme

useTheme will track colorScheme from Telegram sdk in reactive way

Usage

<script setup lang="ts">
import { useTheme } from '@tok/telegram-ui/use/theme';
import { watch } from 'vue';

const theme = useTheme();

watch(
  theme,
  (value) => {
    console.log(value);
  },
  { immediate: true }
);
</script>