lottie react

Lottie-React

Dieses Projekt soll den Entwicklern die volle Kontrolle über Lottie- Instanz mit minimaler Implementierung geben, indem Lottie-Web in eine Komponente oder einen Haken eingewickelt wird, die in React- Anwendungen leicht verwendet werden können.

Installation

1. Stellen Sie sicher, dass die Peer-Abhängigkeiten installiert sind: react und react-dom .

   Hinweis: Diese Bibliothek verwendet React-Hooks, sodass die für React- und React-DOM erforderliche minimale Version v16.8.0 beträgt.

2. Installieren Sie lottie-react mit Garn

   yarn add lottie-react

   oder npm

   npm i lottie-react

Verwendung

Verwenden der Komponente (versuchen Sie es)

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

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

export default App ;

Verwenden des Hakens (probieren Sie es aus)

 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 ;

? Dokumentation

Weitere Informationen und Beispiele finden Sie in der Dokumentation unter https://lottiereAct.com .

Tests

Führen Sie die Tests mit dem yarn test -Testbefehl aus.

Berichterstattung

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

Beitrag

Irgendwelche Fragen oder Vorschläge ? Verwenden Sie die Registerkarte Diskussionen . Irgendwelche Probleme ? Zögern Sie nicht, es auf der Registerkarte "Problemen" zu dokumentieren, und wir werden unser Bestes tun, um es zu untersuchen und zu beheben. Irgendwelche Lösungen ? Sie sind sehr willkommen, um eine Pull -Anfrage zu öffnen.

v3 ist in der Entwicklung und plant, viele Funktionen und Verbesserungen zu erzielen. Im Moment sind im Moment jedoch sehr beschäftigt mit arbeitsbezogenen Projekten. Sie können den Fortschritt unter der v3 -Filiale überprüfen. Und natürlich werden Sie ermutigt, einen Beitrag zu leisten. :)

Vielen Dank, dass Sie Ihre Zeit in unser Projekt investiert haben!

Projekte zum Auschecken

• Lottie -Web - Lottie -Implementierung für Web. Unser Projekt basiert darauf, und Sie möchten es vielleicht überprüfen, um ein besseres Verständnis dafür zu haben, was sich hinter diesem Paket befindet oder welche Funktionen Sie in Zukunft erwarten könnten.
• Lottie -Android - Lottie -Implementierung für Android
• Lottie -ios - Lottie -Implementierung für iOS
• Lottie-React-Native-Lottie-Implementierung für React Native
• LotTiefiles - Suchen Sie nach Animationsdateien? LotTiefiles hat viele von ihnen!

Lizenz

Lottie-React ist unter der MIT-Lizenz erhältlich.

Vielen Dank an David Probst Jr für die in den Beispielen verwendeten Animationen.