lottie react

lottie-react

Ce projet est destiné à donner aux développeurs un contrôle total sur l'instance Lottie avec une implémentation minimale en emballant Lottie-Web dans un composant ou un crochet qui peut être facilement utilisé dans les applications React .

Installation

1. Assurez-vous que les dépenses de pairs sont installées: react et react-dom .

   Remarque: Cette bibliothèque utilise des crochets React, de sorte que la version minimale requise pour React et React-Dom est V16.8.0 .

2. Installer lottie-react à l'aide du fil

   yarn add lottie-react

   ou npm

   npm i lottie-react

Usage

En utilisant le composant (essayez-le)

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

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

export default App ;

En utilisant le crochet (essayez-le)

 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 ;

? Documentation

Découvrez la documentation sur https://lottieract.com pour plus d'informations et d'exemples.

Tests

Exécutez les tests à l'aide de la commande yarn test .

Rapport de couverture

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

Contribution

Des questions ou des suggestions ? Utilisez l'onglet Discussions . Des problèmes ? N'hésitez pas à le documenter dans l'onglet Issues , et nous ferons de notre mieux pour enquêter et le réparer. Des solutions ? Vous êtes très bien accueilli pour ouvrir une demande de traction .

? v3 est en cours de développement et prévoit d'apporter beaucoup de fonctionnalités et d'améliorations. Mais malheureusement, pour le moment, tous les mainteneurs sont très occupés par des projets liés au travail. Vous pouvez consulter les progrès sous la branche v3 . Et bien sûr, vous êtes encouragé à contribuer. :)

Merci d'avoir investi votre temps dans la contribution à notre projet!

Projets à vérifier

• Lottie-Web - Implémentation Lottie pour Web. Notre projet est basé sur cela, et vous voudrez peut-être le vérifier afin d'avoir une meilleure compréhension de ce qui se trouve derrière ce package ou des fonctionnalités que vous pourriez vous attendre à l'avenir.
• Lottie-Android - Implémentation Lottie pour Android
• Lottie-IOS - Implémentation de Lottie pour iOS
• Lottie-React-Native - Implémentation Lottie pour React Native
• Lottiefiles - recherchez-vous des fichiers d'animations? Lottiefiles en a beaucoup!

Licence

Lottie-React est disponible sous la licence du MIT.

Merci à David Probst Jr pour les animations utilisées dans les exemples.