Telegram Webapp for SolidJs

A SolidJs wrapper for creating Telegram Webapp.

Usage

Import this package in your app (Javascript or Typescript)

``bash
npm i --save telegram-webapp-solid
yarn add telegram-webapp-solid
pnpm add telegram-webapp-solid
`

Then you can use ready-made components or signals.

Components are truly declarative ways of using the API, signals are a more procedural approach and should be use to get more control over the API.

- Telegram Webapp for SolidJs
- Usage
- Components
- AlertButton
- Alert
- BackButton
- ConfirmButton
- Confirm
- HapticButton
- HapticInput
- MainButton
- PopupButton
- Popup
- QRCodeButton
- StableContainer
- Signals
- createBackButtonSignal
- createDataSignal
- createExpandSignal
- createHapticImpactSignal
- createHapticSelectionSignal
- createLifecycleSignal
- createMainButtonSignal
- createOpenSignal
- createPromptQrCodeScanSignal
- createThemeSignal
- createUserSignal
- createVersionSignal
- createViewportHeightSignal
- createViewportStableHeightSignal
- Demo

$3

Components are a declarative way to use Telegram Webapp capabilities.

#### AlertButton

This is a regular button that spawns an alert when clicked.

See : Alert

#### Alert

When this component is rendered, shows an alert to the user.
An alert is just a message with a "close" button.

#### BackButton

When this component is rendered, the app's exit button turns into a back button, where you can provide a onClick callback

Also available as a signal with createBackButtonSignal

#### ConfirmButton

This is a regular button that spawns a confirm popup when clicked.

See : Confirm

#### Confirm

When this component is rendered, shows a confirm popup to the user.
A confirm popup is a message with a "OK" and a "cancel" button. When the user chooses "OK", the popup returns true, when the user chooses "cancel" or click away it returns false

#### HapticButton

This is a standard except it vibrates when touched on mobile (you can pass a hapticForce prop to change the
intensity)

#### HapticInput

This is a standard except it vibrates when focused on mobile (it uses a specific haptic force for selections)

#### MainButton

When this component is rendered, the app's main button appears on the bottom of the screen. You can provide a text prop, an active boolean prop, a progressVisible boolean prop, a hapticForce setting and a onClick callback

Also available as a signal with createMainButtonSignal

#### PopupButton

This is a regular button that spawns a popup when clicked.

See : Popup

#### Popup

When this component is rendered, shows a popup to the user.
A popup is a message with 1-3 buttons. When the user chooses a button, the popup returns the id of the pressed button.

Buttons can be one of :

- default, a button with the default style,
- ok, a button with the localized text “OK”,
- close, a button with the localized text “Close”,
- cancel, a button with the localized text “Cancel”,
- destructive, a button with a style that indicates a destructive action (e.g. “Remove”, “Delete”, etc.).

#### QRCodeButton

When this component is rendered, brings up a QR code scanner on the screen.
You can provide a callback to get back the scanned text.

#### StableContainer

A standard

except it uses css variables provided by telegram to render only inside the space of the web app.

$3

Signals are not always true reactive signals, but they provide a procedural approach to the Telegram Webapp API.

#### createBackButtonSignal

Returns an object to see and change the visibility of the back button

#### createDataSignal

Returns a [initData, sendData] tuple that are only wrapped around the API

#### createExpandSignal

Returns a [expanded, expand] tuple where expanded is a boolean indicating if the app is expanded and expand is a function
that expands the app

#### createHapticImpactSignal

Takes a hapticForce prop and returns a function that vibrates the device with the given intensity

#### createHapticSelectionSignal

Returns a function that vibrates the device with a specific intensity made for selections

#### createLifecycleSignal

Returns a { ready, close } object that are only wrapped around the API

#### createMainButtonSignal

Returns an object to see and change the visibility of the main button.
You can also see/change the text, the progress indicator and the "active" state

#### createOpenSignal

Returns an object to open link, Telegram links and invoices (simple wrappers around the API).
You can also use onInvoiceClosed as a shorthand to the invoiceClosed event

#### createPromptQrCodeScanSignal

Returns a function that opens the QR Code scanner and returns a promise with the scanned text

#### createThemeSignal

Returns an object with a theme key, which is a reactive theme object and also setHeaderColor() and setBackgroundColor().

#### createUserSignal

Returns the user object from the Telegram API. (Warning : it uses initDataUnsafe for the moment)

#### createVersionSignal

Returns an object with a version key and a isVersionAtLeast` function.

#### createViewportHeightSignal

Returns a signal that gives the height of the viewport as it changes

#### createViewportStableHeightSignal

Returns a signal that gives the height of the viewport as it finish changing.

Demo

You can check the demo by looking at the demo folder.

You can also open the live demo in telegram