How to add animated Telegram Stickers/Emojis to React app

How to add animated Telegram stickers/emojis to your website/miniapp? It’s very simple:

The finished React project is available here

Go to @GimmeStickerBot (this is not an advertisement 😅) and send him the sticker/emoji, you want.

Sent an emoji 🤯? Then click on the “Animated” button.

Select the TGS format (available for stickers like Duck, Utya Duck 2, TON Pack, etc.) and in response from the bot you receive an archive containing a file in the .tgs format.

Go to this site and upload the .tgs file there. Next, click Open and on the page that opens, in the “Export animation” section, select the “Save as Lottie/JSON” option. The JSON file containing the Lottie animation should start downloading.

Install a library for working with Lottie animations in your React application:

npm i lottie-react

Add the previously downloaded JSON file to the desired project folder. In my case it’s

./src/assets/

Open the component file to which you want to add animation and add the following code to it:

import Lottie from ‘lottie-react’;
import animation from ‘./assets/animation.json’;

function MyComponent() {
  return (
    // Your code
    <Lottie
      animationData={animation}
      loop={true}
      style={{ width: '100px', height: '100px' }}
      />
    // Your code
  );
}

export default MyComponent;

And that’s it!)
If you know any other simpler ways to add animated stickers/emoji from Telegram to your React application, write in the comments, I’ll be glad to read them.