Guillaume David - July 4, 2022
Il y a quelques mois, je vous faisais découvrir scroll reveal, une librairie JavaScript qui permet d’appliquer un effet de scroll sur un élément html. Aujourd’hui, je vais vous faire découvrir react reveal, il a pour objectif de faire la même chose, mais, pour vos applications React.
Installation
Pour pouvoir utiliser react reveal, il vous fait l’installer via nodeJS comme chaque package.
| npm install react-reveal –-save | |
| ''' | |
| yarn add react-reveal |
Choisissez la commande qui vous convient le mieux, dans les deux cas, cela installe la même version.
Utilisation
React reveal nous propose différents types d’effet, un effet de zoom, un effet de rotation, un effet d’apparition …
Mais comme toute librairie React, il va falloir l’importer. Commençons par l’effet d’apparition ou plutôt l’effet Fade.
| import Fade from ‘react-reveal/fade’ ; | |
| function Example () { | |
| return ( | |
| <div> | |
| <Fade left> | |
| <p>Hello World</p> | |
| </Fade> | |
| </div> | |
| ) | |
| } |
Pour commencer, on importe Fade du package. Ensuite, il s’utilise comme un wrapper, c’est-à-dire qu’il faut wrapper l’élément auquel nous voulons donner l’effet.
Vous remarquerez qu’on ajoute un paramètre à Fade, ici left, cela précise de quel côté notre élément va apparaître. On peut bien sur le changer par right, top et bottom.
Vous pouvez aussi wrapper un composant tout entier, react-reveal ne vous limite donc pas dans l’utilisation de ces effets.
Prenons un autre exemple et donc un autre effet, un effet de zoom avec … Zoom.
| import Zoom from ‘react-reveal/zoom ‘ ; | |
| function Example () { | |
| return ( | |
| <div> | |
| <Zoom right> | |
| <p>Hello World</p> | |
| </Zoom> | |
| </div> | |
| ) | |
| } |
Tous les effets fonctionnent à peu près pareil, ils prennent un paramètre (deux pour l’effet rotation) et wrappe un élément HTML ou un composant.
Pour conclure, si vous voulez aller plus loin, je vous conseille le site officiel de react reveal.
