tg-app-ui

🇺🇸 Documentation in English is available via link

Введение

Библиотека tg-app-ui представляет собой набор React-компонентов, которые имитируют интерфейс клиента Telegram. Вы можете использовать эти компоненты для быстрой разработки мини-приложений Telegram, используя фреймворк React.

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

Подробнее про мини-приложения Telegram

Пример мини-приложения, использующего tg-app-ui: @MiniAppExampleBot

Возможности библиотеки

• Поддержка различных цветовых тем
• Поддержка различных языков
• Меню в стиле клиента Telegram
• Кнопки действий
• Формы - поля ввода, переключатели, селекты
• Загрузочные спиннеры
• Модальные окна

Дорожная карта

• Дополнить документацию
• Добавить тесты для всех компонентов
• Добавить больше компонентов и функционала

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

⚠️ Документация будет дополнена в ближайшее время. ⚠️

Компоненты

1. TgMiniAppRoot
2. TgBlock
3. TgBlockItem

TgMiniAppRoot

Это корневой компонент, в который должно быть обернуто приложение.

<TgMiniAppRoot>
    /* Your app here */
</TgMiniAppRoot>

TgBlock и TgBlockItem

Это основные компоненты, из которых можно собрать интерфейс приложения.

TgBlock позволяет создать блок с заголовком и кратким описанием снизу, внутри которого можно разместить один или несколько TgBlockItem.

TgBlockItem - это основной компонент, который представляет собой блок с текстом и иконками. Вы можете добавить к нему chevron иконку, если блок должен быть ссылкой на другой раздел приложения, галочку, если вы создаете выбор из списка, или переключатель.

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

Telegram-бот с примерами использования библиотеки: @MiniAppExampleBot

Для корректной работы приложения дополнительно используются следующие библиотеки:

• react-router и react-router-dom для навигации между различными разделами приложения
• react-icons для отрисовки красивых иконок

Чтобы запустить пример приложения на локальном окружении, клонируйте репозиторий и выполните следующие команды:

cd tg-miniapp-example
npm i

После установки всех зависимостей запустите приложение:

npm run start

<TgBlock title="Простое меню">
    <TgBlockItem text="Профиль" chevron />
    <TgBlockItem text="Настройки" chevron />
    <TgBlockItem text="Уведомления" chevron  />
    <TgBlockItem text="Конфиденциальность" chevron  />
    <TgBlockItem text="Техподдержка" chevron  />
</TgBlock>

Результат:

<TgBlock 
    title="Меню с иконками" 
    caption="Это пример меню с простыми иконками и второстепенным текстом"
>

    <TgBlockItem
        text="Профиль"
        caption="Данные вашего профиля"
        icon={<IoPersonSharp size={20} />}
        chevron
    />
    
    <TgBlockItem
        text="Настройки"
        caption="Управление параметрами"
        icon={<IoSettingsSharp size={20} />}
        chevron
    />
    
    <TgBlockItem
        text="Уведомления"
        caption="Включить и выключить"
        icon={<IoNotificationsSharp size={20} />}
        chevron
    />
    
    <TgBlockItem
        text="Конфиденциальность"
        caption="Защита ваших данных"
        icon={<IoLockClosed size={20} />}
        chevron
    />

    <TgBlockItem
        text="Поддержка"
        caption="Остались вопросы? Пишите!"
        icon={<IoHelpCircleSharp size={20} />}
        chevron
    />

</TgBlock>

Результат:

<TgBlock 
    title="Меню с иконками"
>

    <TgBlockItem
        text="Профиль"
        icon={<IoPersonSharp size={20} />}
        iconColor="green"
        chevron
    />
    
    <TgBlockItem
        text="Настройки"
        icon={<IoSettingsSharp size={20} />}
        iconColor="red"
        chevron
    />
    
    <TgBlockItem
        text="Уведомления"
        icon={<IoNotificationsSharp size={20} />}
        iconColor="orange"
        chevron
    />
    
    <TgBlockItem
        text="Конфиденциальность"
        icon={<IoLockClosed size={20} />}
        iconColor="violet"
        chevron
    />

    <TgBlockItem
        text="Поддержка"
        icon={<IoHelpCircleSharp size={20} />}
        iconColor="blue"
        chevron
    />

</TgBlock>

Результат:

const [switcherValue1, setSwitcherValue1] = useState(true);
const [switcherValue2, setSwitcherValue2] = useState(false);
const [switcherValue3, setSwitcherValue3] = useState(false);

const toggleSwitcher1 = () => setSwitcherValue1(!switcherValue1);
const toggleSwitcher2 = () => setSwitcherValue2(!switcherValue2);
const toggleSwitcher3 = () => setSwitcherValue3(!switcherValue3);

return <TgBlock title="Переключатели">

    <TgBlockItem
        text="Получать уведомления"
        switcher={switcherValue1}
        onClick={toggleSwitcher1}
    />

    <TgBlockItem
        text="Получать рассылки"
        switcher={switcherValue2}
        onClick={toggleSwitcher2} />

    <TgBlockItem
        text="Получать спецпредложения"
        switcher={switcherValue3}
        onClick={toggleSwitcher3}
    />

</TgBlock>

Результат:

const [selectedValue, setSelectedValue] = useState('white');

return <TgBlock title={lang.forms_select_title}>

    <TgBlockItem
        text="Белый"
        icon="⚪️"
        check={selectedValue === 'white'}
        onClick={() => setSelectedValue('white')}
    />

    <TgBlockItem
        text="Чёрный"
        icon="⚫️"
        check={selectedValue === 'black'}
        onClick={() => setSelectedValue('black')}
    />

    <TgBlockItem
        text="Синий"
        icon="🔵"
        check={selectedValue === 'blue'}
        onClick={() => setSelectedValue('blue')}
    />

    <TgBlockItem
        text="Красный"
        icon="🔴"
        check={selectedValue === 'red'}
        onClick={() => setSelectedValue('red')}
    />

    <TgBlockItem
        text="Жёлтый"
        icon="🟡"
        check={selectedValue === 'yellow'}
        onClick={() => setSelectedValue('yellow')}
    />

</TgBlock>

Результат: