Reactda Telegramdagi animated emojilardan foydalanish.

Hozirda Telegram platformasida deyarli barcha emojilarning animated varianti bor, bundan tashqari community tomonidan qo’shilgan animated sticker va emojilar soni mingdan oshgan. Telegramdagi bu animatsiyalar lottie formatida bo’lib ularni websaytda ham ishlatish imkoni mavjud.

1. Reactda Lottie animatsiyalaridan foydalanish uchun react-lottie kutubxonasini o’rnatamiz:

npm install react-lottie

2. Telegramdan emoji animatsiyasini yuklab olamiz:

3.Lottie animatsiyalar odatda .json formatida bo’ladi, telegram animatsiyalari esa maxsus .tgs formatida bo’ladi. Saqlangan .tgs faylni shunchaki uncompress qilish orqali .json faylni olishimiz mumkun. Faylni loyihaga cat.json nomi bilan saqlaymiz.

4. Sahifaga Lottie componentini qo’shamiz:

import Lottie from "react-lottie";
import "./App.css";

const animationData = require("./cat.json");

const App = () => {
    const options = {
        loop: false,
        autoplay: true,
        animationData: animationData,
    };
    
    return (
        <div className="App">
            <Lottie options={options} height={400} width={400} />
        </div>
    );
};

export default App;

Natija:

Bu fayllardan nafaqat reactda balki istalgan lottie animatsiyalarini ishlatish mumkun bo’lgan platformada foydalanish mumkin.

Github: https://github.com/nurikjohn/telegram-animated-emojis

Bonus ✨

Lottie animatsiyalarini https://lottiefiles.com sayti orqali o’zgartirish, ranglarni almashtirish mumkun: