lottie react

Lottie-React

Proyek ini dimaksudkan untuk memberikan kontrol penuh kepada pengembang atas instance Lottie dengan implementasi minimal dengan membungkus Lottie-Web dalam komponen atau pengait yang dapat dengan mudah digunakan dalam aplikasi React .

Instalasi

1. Pastikan Anda memiliki ketergantungan rekan yang terpasang: react and react-dom .

   CATATAN: Perpustakaan ini menggunakan react hooks sehingga versi minimum yang diperlukan untuk React dan React-DOM adalah V16.8.0 .

2. Instal lottie-react menggunakan benang

   yarn add lottie-react

   atau NPM

   npm i lottie-react

Penggunaan

Menggunakan komponen (coba)

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

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

export default App ;

Menggunakan kait (coba)

 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 ;

? Dokumentasi

Lihat dokumentasi di https://lottiereact.com untuk informasi dan contoh lebih lanjut.

Tes

Jalankan tes menggunakan perintah yarn test .

Laporan Cakupan

 -----------------------------|---------|----------|---------|---------|-------------------
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 |                   
-----------------------------|---------|----------|---------|---------|-------------------

Kontribusi

Ada pertanyaan atau saran ? Gunakan tab Diskusi . Ada masalah ? Jangan ragu untuk mendokumentasikannya di tab Masalah , dan kami akan melakukan yang terbaik untuk menyelidikinya dan memperbaikinya. Ada solusi ? Anda sangat disambut untuk membuka permintaan tarik .

? v3 sedang dalam pengembangan dan berencana untuk membawa banyak fitur dan peningkatan. Namun sayangnya, saat ini semua pengelola sangat sibuk dengan proyek terkait pekerjaan. Anda dapat memeriksa kemajuan di bawah cabang v3 . Dan tentu saja, Anda didorong untuk berkontribusi. :)

Terima kasih telah menginvestasikan waktu Anda untuk berkontribusi pada proyek kami!

Proyek untuk check out

• Lottie -Web - Implementasi Lottie untuk Web. Proyek kami didasarkan pada itu, dan Anda mungkin ingin memeriksanya untuk memiliki pemahaman yang lebih baik tentang apa yang ada di balik paket ini atau fitur apa yang dapat Anda harapkan di masa depan.
• Lottie -Android - Implementasi Lottie untuk Android
• Lottie -IOS - Implementasi Lottie untuk iOS
• Lottie-React-Preative-Implementasi Lottie untuk React Native
• Lottiefiles - Apakah Anda mencari file animasi? Lottiefiles punya banyak dari mereka!

Lisensi

Lottie-React tersedia di bawah lisensi MIT.

Terima kasih kepada David Probst JR untuk animasi yang digunakan dalam contoh.