DEPRECATED

MainButton moved to @twa-dev/sdk. This repo and corresponding npm-package are deprecated.

MainButton

React component for Telegram Web Apps (TWA) Main Button.

npm i @twa-dev/mainbutton

Motivation

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

const MainButton = window.Telegram.WebApp.MainButton;

MainButton.setText('Submit');
MainButton.show();
MainButton.onClick(() => alert('submitted'));

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

This package exports React component that wraps TWA MainButton SDK:

import MainButton from '@twa-dev/mainbutton';

<MainButton text="Submit" onClick={() => alert('submitted')} />

Demo

@MainButtonDemoBot

Codesandbox

Props

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

• text
• color
• textColor
• disabled
• progress
• onClick