@telegram-apps/sdk-solid@2

Solid.js package providing utilities that developers may find useful when developing a mini application.

TIP

Since this package offers utility functions that extend the functionality of @telegram-apps/sdk, it is recommended to review the SDK package documentation first.

Installation

Before proceeding, it is assumed that you have already installed the solid-js package, as it is a peer dependency of this package.

pnpm

pnpm i @telegram-apps/sdk-solid

npm

npm i @telegram-apps/sdk-solid

yarn

yarn add @telegram-apps/sdk-solid

INFO

This package fully re-exports the @telegram-apps/sdk package, so you don't need to install it separately.

Usage

Here is a simple usage example of the package:

index.tsx

import { render } from 'solid-js/web';
import { init, backButton } from '@telegram-apps/sdk-solid';

import { BackButton } from './BackButton.js';

// Initialize the package.
init();

// Mount the Back Button, so we will work with 
// the actual component properties.
backButton.mount();

render(() => <BackButton/>, document.getElementById('root')!);

BackButton.ts

import { createEffect, onCleanup, onMount } from 'solid-js';
import { backButton, useSignal } from '@telegram-apps/sdk-solid';

/**
 * Component which controls the Back Button visibility.
 */
export function BackButton() {
  const isVisible = useSignal(backButton.isVisible);

  createEffect(() => {
    console.log('The button is', isVisible() ? 'visible' : 'invisible');
  });

  onMount(() => {
    backButton.show();
    onCleanup(() => {
      backButton.hide();
    });
  });

  return null;
}

Hooks

useSignal

A helper that allows you to use our signals in the application. It returns a Solid signal which updates every time, our signal changes.

import { createEffect, onCleanup, onMount } from 'solid-js';
import { backButton, useSignal } from '@telegram-apps/sdk-solid';

function Component() {
  const isVisible = useSignal(backButton.isVisible);

  createEffect(() => {
    console.log('The button is', isVisible() ? 'visible' : 'invisible');
  });

  onMount(() => {
    backButton.show();
    onCleanup(() => {
      backButton.hide();
    });
  });

  return null;
}

useLaunchParams

A function that returns the mini application's launch parameters.

import { useLaunchParams } from '@telegram-apps/sdk-solid';

function Component() {
  const lp = useLaunchParams();
  return <div>Start param: {lp.startParam}</div>;
}