dev-resources.site

for different kinds of informations.

React Slideshow Component with autoplay, fullscreen mode and expand all

Published at

5/5/2022

Categories

react

customhooks

javascript

webdev

Author

andrewheinke

Main Article

https://dev.to/andrewheinke/react-slideshow-component-with-autoplay-fullscreen-mode-and-expand-all-4o9b

Categories

4 categories in total

Author

12 person written this

React Slideshow Component with autoplay, fullscreen mode and expand all

A React Slideshow component with all the bells and whistles

Live Demo →

Code View →

I loved the slider used in https://www.educative.io/ so I wanted to recreate the design and functionality with React.

Features

Previous/Next Slide
Autoplay slides
Restart slider
Expand/Collapse all slides
Fullscreen slides mode

Simple API

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

...

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

To avoid repeating code I utilized a few custom hooks:

useCount – for controlling active slide index

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 – for controlling expanded/collapsed slides, autoplay mode and full screen mode

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 – for controlling slide increments in autoplay mode

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;
};

customhooks Article's

29 articles in total

Mastering Navigation Control in React with useCallbackPrompt and useBlocker 🚦

Custom Hooks in React: Reusing Logic Across Components

Fixing UI Update Issues with Custom Hooks in React

Custom Hooks in React: A Guide to Creation and Usage

React: leveraging custom hooks to extract reusable logic

Custom Hooks in React

Mobile Orientation (React-Native)

Reusing Logic in React with Custom Hooks: a Practical guide

Harnessing Firebase in React with Custom Hooks: A Practical Guide

Building Powerful React Components with Custom Hooks

React Custom Hooks (useNetworkStatus)

React Custom Hooks (useMediaPermission)

React Custom Hooks (useDebounce)

How to Create a Counter App with useReducer and Custom Hooks

How to create custom Hooks in React.Js?

React Slideshow Component with autoplay, fullscreen mode and expand all

currently reading

React Portals: create and open modals with keyboard keys

Learn Something on React JSX and Hooks

How to create Tabs in ReactJs using Hooks ?

Simple hook to handle featue flags

React custom hooks to update form data

Custom hook useScroll.tsx :: React TypeScript

useQuery() with React Router Dom

React Custom Hooks

useGeoPosition Hook - A Custom React Hook to grab latitude and longitude from a given address.

`useBackButton` hook to handle back button behavior in React Native

Form in Modal using React hooks – mistakes and lesson learnt

Featured ones:

abubakersiddique761