Компонент React Slideshow с автовоспроизведением, полноэкранным режимом и функцией развернуть все

Содержание

Компонент React Slideshow со всеми необходимыми функциями
Живая демонстрация →
Просмотр кода →
Особенности
Простой API

Компонент React Slideshow со всеми необходимыми функциями

Живая демонстрация →

Просмотр кода →

Мне понравился слайдер, используемый в https://www.educative.io/, поэтому я хотел воссоздать его дизайн и функциональность с помощью React.

Особенности

Предыдущий/Следующий слайд
Автоигра слайдов
Перезапуск слайдера
Развернуть/свернуть все слайды
Полноэкранный режим слайдов

Простой API

const data = [
  {
    title: "First",
    text: "foo bar baz"
  },
  ...
];

...

// optional prop autoPlayTime to control autoplay time on slide
<Slides slides={data} />

Вход в полноэкранный режим Выход из полноэкранного режима

Чтобы избежать повторения кода, я использовал несколько пользовательских хуков:

useCount — для управления индексом активного слайда

import { useState } from "react";

export const useCount = (initialValue = 0) => {
  const [activeIndex, setActiveIndex] = useState(initialValue);

  const increment = () => {
    setActiveIndex((prev) => prev + 1);
  };

  const decrement = () => {
    setActiveIndex((prev) => prev - 1);
  };

  const reset = () => {
    setActiveIndex(initialValue);
  };

  return [activeIndex, increment, decrement, reset];
};

Вход в полноэкранный режим Выход из полноэкранного режима

useToggle — для управления развернутыми/свернутыми слайдами, режимом автовоспроизведения и полноэкранным режимом

import { useCallback, useState } from "react";

export const useToggle = (initialValue = false) => {
  const [state, setState] = useState(initialValue);
  const toggle = useCallback(() => setState((state) => !state), []);
  return [state, toggle];
};

Войти в полноэкранный режим Выход из полноэкранного режима

useInterval — для управления увеличением слайдов в режиме автовоспроизведения

import { useEffect, useRef } from "react";
export const useInterval = (callback, delay) => {
  const intervalId = useRef(null);
  const savedCallback = useRef(callback);

  useEffect(() => {
    savedCallback.current = callback;
  });

  useEffect(() => {
    const tick = () => savedCallback.current();

    if (typeof delay === "number") {
      intervalId.current = window.setInterval(tick, delay);

      return () => window.clearInterval(intervalId.current);
    }
  }, [delay]);

  return intervalId.current;
};