Skip to content

Latest commit

 

History

History
38 lines (28 loc) · 1.22 KB

Readme.md

File metadata and controls

38 lines (28 loc) · 1.22 KB
Raw

BottomBar

React component for Telegram Web Apps (TWA) bottom bar. Bottom bar is an area that wraps Main and Secondary buttons.

Installation

npm i @twa-dev/sdk

Motivation

TWA SDK contains an interface that controls bottom bar. It's written in imperative way:

const bottomBarColor = window.Telegram.WebApp.bottomBarColor;
window.Telegram.WebApp.setBottomBarColor('#ff0000');

It's not the best way to write code, especially if you use libraries like React.

This package exports React component that wraps TWA bottom bar SDK:

import { BottomBar, MainButton, SecondaryButton } from '@twa-dev/sdk/react';

<BottomBar bgColor="#ff0000">
  <MainButton text="Continue" onClick={() => alert('continue')} />
  <SecondaryButton text="Cancel" position="bottom" onClick={() => alert('cancelled')} />    
</BottomBar>

Demo

@BottomButtonBot

Codesandbox

Props

Naming is pretty straight forward and corresponds SDK props and methods:

  • children
  • bgColor