Utiliser des Lotties avec React

Utiliser des Lotties avec React

React Typescript

Introduction

Le format Lottie est un format open source d'animation vectorielle, basé sur le format de données JSON, créé à la base par Airbnb, afin d'animer leur logo d'entreprise.

Les Lotties permettent d'utiliser des animations aussi facilement que des images statiques, à un détail près, le poids de celui-ci.

En effet, le premier avantage du Lottie est que les fichiers sont très légers, plus légers qu’un GIF. Le second avantage est que le format vectoriel permet de s’adapter à tous types d’écran, sans perte de qualité.

Il vous permettra notamment de dynamiser votre page tout en ayant le contrôle de sa vitesse de lecture.

Où trouver des fichiers Lotties ?

Vous trouverez de nombreux Lotties sur la plateforme lottiefiles.com. Vous pouvez également les éditer et customiser un ensemble de propriétés (couleur, vitesse, et arrière-plan), directement depuis le site web.

Comment afficher un Lottie avec React ?

La librairie lottie-react est bien réalisée, et elle vous permettra d'afficher des Lotties depuis votre site web.

Commençons par installer la librairie à l'aide de npm :

npm i lottie-react

Créons ensuite notre composant React, qui va héberger la visualisation de notre Lottie :

import { useLottie } from "lottie-react";
import type { FC } from "react";
import rocketLaunch from "../../lotties/rocket-launch.json";
 
interface RocketLaunchProps {
  style?: React.CSSProperties;
}
 
const RocketLaunch: FC<LottieProps> = ({ style }) => {
  const options = {
    animationData: rocketLaunch,
    loop: true,
    style,
  };
 
  const { View } = useLottie(options);
 
  return <>{View}</>;
};
 
export default RocketLaunch;
 

Dans cet exemple de code, nous avons créé un Functional Component appelé RocketLaunch.

Nous avons importé plus haut notre Lottie au format JSON, à l'aide d'un import classique ES6.

Ce composant utilise le hook useLottie fournit par la librairie lottie-react.

Le hook accepte en paramètre un ensemble d'options, voici celles que nous utilisons :

PropriétéDescription
animationDataCette propriété reçoit le lotties au format json.
loopPermet de jouer en boucle l'animation du Lottie.
styleStyle css pour la div qui contient le Lottie.

Le hook renvoie une instance d'un composant que vous n'aurez plus qu'à afficher en retour.

Demo

Voici le résultat du code que nous avons vu précédemment 🙂 :