Getting Started with Telegram Mini Apps Using TMA.js and React

Telegram Mini Apps are small applications that can be integrated into Telegram bots, providing a seamless user experience within the Telegram app. TMA.js is a library designed to help developers build these mini apps, and the SDK for React helps to integrate these functionalities within React applications.

Here’s how you can get started with TMA.js and the SDK for React:

Installation

First, you need to install the SDK. You can do this using npm or yarn:

npm install @tma.js/sdk-react 
# or 
yarn add @tma.js/sdk-react        

Basic Setup

To create a mini app using TMA.js in a React project, you need to initialize the library and create your components. Here’s a simple example:

import React, { useEffect } from 'react';
import { init, useInit, TelegramWebApp } from '@tma.js/sdk-react';

const App = () => {
  const { ready } = useInit();

  useEffect(() => {
    if (ready) {
      // The TMA.js is ready
      TelegramWebApp.ready();
    }
  }, [ready]);

  return (
    <div>
      {ready ? (
        <h1>Telegram Mini App is Ready!</h1>
      ) : (
        <h1>Initializing...</h1>
      )}
    </div>
  );
};

export default App;        

Configuration

You can configure various aspects of your mini app, such as the main button, background color, and more. Here's an example of setting the main button:

import React, { useEffect } from 'react';
import { init, useInit, TelegramWebApp } from '@tma.js/sdk-react';

const App = () => {
  const { ready } = useInit();

  useEffect(() => {
    if (ready) {
      TelegramWebApp.ready();
      TelegramWebApp.MainButton.setText('Click Me');
      TelegramWebApp.MainButton.show();
    }
  }, [ready]);

  const handleClick = () => {
    TelegramWebApp.MainButton.onClick(() => {
      TelegramWebApp.close();
    });
  };

  return (
    <div>
      {ready ? (
        <button onClick={handleClick}>Click Main Button</button>
      ) : (
        <h1>Initializing...</h1>
      )}
    </div>
  );
};

export default App;        

Using Telegram Web App API

You can access various Telegram Web App APIs provided by TMA.js for functionalities such as closing the app, sending data, and more. Here’s an example:

import React, { useEffect } from 'react';
import { init, useInit, TelegramWebApp } from '@tma.js/sdk-react';

const App = () => {
  const { ready } = useInit();

  useEffect(() => {
    if (ready) {
      TelegramWebApp.ready();
    }
  }, [ready]);

  const sendData = () => {
    TelegramWebApp.sendData(JSON.stringify({ foo: 'bar' }));
  };

  return (
    <div>
      {ready ? (
        <div>
          <h1>Telegram Mini App is Ready!</h1>
          <button onClick={sendData}>Send Data to Telegram</button>
        </div>
      ) : (
        <h1>Initializing...</h1>
      )}
    </div>
  );
};

export default App;        

Documentation and Resources

To dive deeper, refer to the official TMA.js documentation for detailed information on all available features, components, and best practices. You can also find examples and tutorials to help you build more complex mini apps.

Happy coding.