Skip to content

Latest commit

 

History

History
45 lines (34 loc) · 1.22 KB

Readme.md

File metadata and controls

45 lines (34 loc) · 1.22 KB
Raw

SecondaryButton

React component for Telegram Web Apps (TWA) SecondaryButton.

Installation

npm i @twa-dev/sdk

Motivation

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

const SecondaryButton = window.Telegram.WebApp.SecondaryButton;

SecondaryButton.setParams({ text: 'Cancel', position: 'bottom' });
SecondaryButton.show();
SecondaryButton.onClick(() => alert('cancelled'));

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

This package exports React component that wraps TWA SecondaryButton SDK:

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

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

Demo

@BottomButtonBot

Codesandbox

Props

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

  • text
  • color
  • textColor
  • disabled
  • progress
  • onClick
  • hasShineEffect
  • position