Dans ce tutoriel, nous allons construire un composant Slider plein écran avec React et Hooks. Et pour ce faire, nous allons créer un hook personnalisé pour gérer toute la logique, puis l'utiliser comme méthode d'aide pour afficher les diapositives.

Commençons maintenant par planifier à quoi ressemblera notre application.

• Planifier notre application
• Création du hook personnalisé
• Afficher le Slider

Planifier notre application

Pour pouvoir suivre, vous devez créer une toute nouvelle application React en exécutant la commande suivante sur votre terminal:

npx create-react-app react-fullscreen-slider

Ensuite, structurez votre projet comme suit:

├── App.js
├── App.test.js
├── components
|  └── Slider.js
├── hooks
|  └── useSlider.js
├── images.js
├── index.css
├── index.js
├── logo.svg
├── serviceWorker.js
└── setupTests.js

Comme vous pouvez le voir, la structure des dossiers est très simple. Nous avons un dossier components qui contient un fichier nommé Slider.js, et un autre dossier hooks qui conserve comme vous pouvez le deviner le hook personnalisé useSlider, et un fichier images.js qui contient les images à montrer sur le Slider.

Il est temps maintenant d'ajouter quelques lignes de code à ces fichiers.

• images.js

export default [
  {
    src: "https://drive.google.com/uc?id=1_oA9Sx4D4DhFrYBFQdL0I1CUIz_LhQue",
    text: "Duis aute irure dolor in reprehenderit in voluptate velit esse",
  },
  {
    src: "https://drive.google.com/uc?id=1rJFs-8So16UCiDag__hG4yyf_RnC08Fa",
    text: "Consectetur adipisicing elit cillum dolore eu fugiat nulla",
  },
  {
    src: "https://drive.google.com/uc?id=1HO2AGjd_1yyYI4pYTTBmGXBaWHoGSqCl",
    text: "Asperiores ex animi explicabo cillum dolore eu fugiat nulla",
  },
]

Comme je l'ai dit plus tôt, ce fichier contient les images. Et chaque objet a une image et sa description. Au passage, vous pouvez utiliser une approche différente pour déclarer vos images, cela dépend entièrement de vous.

Nous avons maintenant les données à afficher, il est temps de construire le hook personnalisé pour gérer la logique du Slider.

Faisons cela

Création du hook personnalisé

La fonction useSlider recevra trois arguments: l'image de la diapositive, le texte et le tableau d'images.

• hooks / useSlider.js

import { useEffect } from 'react'

const useSlider = (slideImage, slideText, images) => {
 let slideCounter = 0;

 useEffect(() => startSlider())

 const startSlider =() => {
    slideImage.current.style.backgroundImage = `linear-gradient(
        to right,
        rgba(34, 34, 34, 0.4),
        rgba(68, 68, 68, 0.4)
        ), url(${images[0].src})`;
        slideText.current.innerHTML = images[0].text;
}

Avec ces paramètres, nous pouvons maintenant créer une nouvelle fonction startSlider() et gérer la première diapositive lors du chargement de la page.

Plus tard, nous allons utiliser useRef pour sélectionner les éléments et pouvoir manipuler le DOM (Document Object Model). Mais pour l'instant, gardez à l'esprit que slideImage et slideText sont des références à certains éléments du DOM.

Nous pouvons maintenant accéder aux propriétés de ces éléments et commencer à les styliser. Ici, nous appliquons un dégradé linéaire à l'image, pour avoir un joli style, et ensuite, ajoutez le texte correspondant au DOM.

• hooks / useSlider.js

const handleSlide = slide => {
  slideImage.current.style.backgroundImage = `linear-gradient(
    to right,
    rgba(34, 34, 34, 0.4),
    rgba(68, 68, 68, 0.4)
    ), url(${images[slide - 1].src})`
  slideText.current.innerHTML = images[slide - 1].text
  animateSlide(slideImage)
}

const animateSlide = () => {
  slideImage.current.classList.add("fadeIn")
  setTimeout(() => {
    slideImage.current.classList.remove("fadeIn")
  }, 700)
}

Ensuite, nous utilisons la même méthode avec la fonction handleSlide() en appliquant un dégradé linéaire à l'image. Mais cette fois, nous recevons comme paramètre le numéro de la diapositive ou le compteur si vous voulez, puis on l'utilise pour afficher la diapositive appropriée à l'écran.

Ensuite, nous appelons la méthode animateSlide() pour l'animer avec un bel effet de fondu.

• hooks / useSlider.js

const goToPreviousSlide = () => {
  if (slideCounter === 0) {
    handleSlide(images.length)
    slideCounter = images.length;
  }

    handleSlide(slideCounter)
    slideCounter--;
  }

const goToNextSlide = () => {
  if (slideCounter === images.length - 1) {
    startSlider()
    slideCounter = -1;
    animateSlide(slideImage)
  }

 slideImage.current.style.backgroundImage = `linear-gradient(
        to right,
        rgba(34, 34, 34, 0.4),
        rgba(68, 68, 68, 0.4)
        ),url(${images[slideCounter + 1].src})`;
    slideText.current.innerHTML = images[slideCounter + 1].text;
    slideCounter++;
      animateSlide(slideImage)
}

return { goToPreviousSlide, goToNextSlide }
}

export default useSlider

Comme vous pouvez le voir, ici, nous avons deux fonctions principales: goToPreviousSlide() et goToNextSlide().

La première méthode goToPreviousSlide() vérifiera si le compteur de la diapositive est égal à 0. Si c'est le cas, il affichera la dernière diapositive, sinon il affichera la précédente.

La deuxième méthode fera le contraire. Il vérifiera si le compteur de la diapositive est égal au dernier et si c'est le cas, il redémarrera le Slider, sinon la méthode goToNextSlide() affichera la diapositive suivante.

Et pour rendre tout utilisable dans un autre fichier, nous devons retourner l'objet qui contient goToPreviousSlide() et goToNextSlide().

Cela étant dit, nous pouvons maintenant passer à la partie finale et utiliser le hook personnalisé pour afficher le Slider dans la section suivante.

Afficher le Slider

Nous avons déjà la logique pour afficher les diapositives, la seule chose que nous devons faire maintenant est de les afficher avec Slider.js.

• Slider.js

import React, { useRef } from "react"
import useSlider from "../hooks/useSlider"

const Slider = ({ images }) => {
  const slideImage = useRef(null)
  const slideText = useRef(null)
  const { goToPreviousSlide, goToNextSlide } = useSlider(
    slideImage,
    slideText,
    images
  )

  return (
    <div className="slider" ref={slideImage}>
      <div className="slider--content">
        <button onClick={goToPreviousSlide} className="slider__btn-left">
          <i className="fas fa-angle-left"></i>
        </button>
        <div className="slider--feature">
          <h1 className="feature--title">Dreaming</h1>
          <p ref={slideText} className="feature--text"></p>
          <button className="feature__btn">Get started</button>
        </div>
        <button onClick={goToNextSlide} className="slider__btn-right">
          <i className="fas fa-angle-right"></i>
        </button>
      </div>
    </div>
  )
}

export default Slider

J'ai oublié de le mentionner, mais la partie CSS ne sera pas abordée dans cet article, vous pouvez toujours la retrouver dans le code source. Alors, ne laissez pas ces noms de classes vous perturber.

La fonction Slider() est relativement facile à implémenter car nous avons déjà useSlider.

La seule chose que nous devons faire maintenant est d'importer useSlider et de tirer goToPreviousSlide() et goToNextSlide() sans oublier de passer les paramètres comme arguments à la fonction.

Et comme je l'ai dit plus tôt, nous devons utiliser useRef pour accéder aux éléments du DOM.

Avec cela, nous pouvons maintenant utiliser le composant Slider dans le fichier App.js et transmettre les images à afficher au composant.

• App.js

import React from 'react';
import Slider from './components/Slider'
import Images from './images'

function App()
  return (
    <Slider images={Images}  />
  );
}

export default App;

Et comme vous pouvez le voir ici, nous importons simplement les images et les passons comme accessoires au composant Slider.

Avec cette petite mise à jour, nous avons maintenant terminé la construction d'un composant Slider plein écran à l'aide de React Hooks.

Merci d'avoir lu!

Vous pouvez trouver le code source ici