Utiliser des Lotties avec React

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 :

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