lottie react

تتفاعل لوتي

يهدف هذا المشروع إلى منح المطورين السيطرة الكاملة على مثيل Lottie مع الحد الأدنى من التنفيذ من خلال لف Lottie-Web في مكون أو خطاف يمكن استخدامه بسهولة في تطبيقات React .

تثبيت

1. تأكد من تثبيت الاعتماد على الأقران: react و react-dom .

   ملاحظة: تستخدم هذه المكتبة خطافات React ، لذا فإن الحد الأدنى للنسخة المطلوبة لكل من React و React-DOM هو V16.8.0 .

2. تثبيت lottie-react باستخدام الغزل

   yarn add lottie-react

   أو NPM

   npm i lottie-react

الاستخدام

باستخدام المكون (جربه)

 import React from "react" ;
import Lottie from "lottie-react" ;
import groovyWalkAnimation from "./groovyWalk.json" ;

const App = ( ) => < Lottie animationData = { groovyWalkAnimation } loop = { true } /> ;

export default App ;

باستخدام الخطاف (جربه)

 import React from "react" ;
import { useLottie } from "lottie-react" ;
import groovyWalkAnimation from "./groovyWalk.json" ;

const App = ( ) => {
  const options = {
    animationData : groovyWalkAnimation ,
    loop : true
  } ;

  const { View } = useLottie ( options ) ;

  return < > { View } </ > ;
} ;

export default App ;

؟ الوثائق

الخروج عن الوثائق في https://lottiereact.com لمزيد من المعلومات والأمثلة.

الاختبارات

قم بتشغيل الاختبارات باستخدام أمر yarn test .

تقرير التغطية

 -----------------------------|---------|----------|---------|---------|-------------------
File                         | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
-----------------------------|---------|----------|---------|---------|-------------------
All files                    |     100 |      100 |     100 |     100 |                   
 components                  |     100 |      100 |     100 |     100 |                   
  Lottie.ts                  |     100 |      100 |     100 |     100 |                   
 hooks                       |     100 |      100 |     100 |     100 |                   
  useLottie.tsx              |     100 |      100 |     100 |     100 |                   
  useLottieInteractivity.tsx |     100 |      100 |     100 |     100 |                   
-----------------------------|---------|----------|---------|---------|-------------------

مساهمة

أي أسئلة أو اقتراحات ؟ استخدم علامة التبويب المناقشات . أي قضايا ؟ لا تتردد في توثيقها في علامة تبويب القضايا ، وسنبذل قصارى جهدنا للتحقيق فيها وإصلاحها. أي حلول ؟ أنت موضع ترحيب جدًا لفتح طلب سحب .

v3 قيد التطوير ويخطط لجلب الكثير من الميزات والتحسينات. لكن لسوء الحظ ، في الوقت الحالي ، يكون جميع المشرفين مشغولين للغاية بالمشاريع المتعلقة بالعمل. يمكنك التحقق من التقدم المحرز تحت فرع v3 . وبالطبع ، نشجعك على المساهمة. سائدا

شكرًا لك على استثمار وقتك في المساهمة في مشروعنا!

مشاريع للتحقق من

• Lottie -Web - Lottie تطبيق الويب. يعتمد مشروعنا عليه ، وقد ترغب في التحقق من ذلك من أجل الحصول على فهم أفضل لما وراء هذه الحزمة أو الميزات التي يمكن أن تتوقعها في المستقبل.
• Lottie -Android - تطبيق Lottie لنظام Android
• Lottie -ios - تطبيق Lottie لنظام التشغيل iOS
• تنفيذ Lottie-React-Lottie لـ React Native
• Lottiefiles - هل تبحث عن ملفات الرسوم المتحركة؟ Lottiefiles لديه الكثير منهم!

رخصة

يتوفر Lottie React بموجب ترخيص MIT.

بفضل David Probst Jr للرسوم المتحركة المستخدمة في الأمثلة.