useSlideshow

The useSlideshow hook is designed to manage the state of a slideshow. It provides methods for adding and removing slides as well as navigating between slides. It also provides information about the current state of the slideshow, such as the slides themselves and the index of the active slide.

(Note that a slideshow displays one item at a time, while a carousel displays multiple items.)

Usage

Make sure you have @ridgehkr/useful installed in your application. If not, you can get started by following the installation instructions.
Import useSlideshow into your component.

import { useSlideshow } from '@ridgehkr/useful'

Example

Slideshow.jsx

import { useState } from 'react'
import { useSlideshow } from '@ridgehkr/useful'
 
function SlideshowDemo() {
  const { slides, activeSlideIndex, addSlide, removeSlide, activateSlide } =
    useSlideshow<string>(['Slide 1', 'Slide 2', 'Slide 3'])
 
  const [newSlideContent, setNewSlideContent] = useState('')
 
  const handleAddSlide = () => {
    if (newSlideContent.trim() !== '') {
      addSlide(newSlideContent)
      setNewSlideContent('')
    }
  }
 
  return (
    <div>
      <h1>Slideshow Demo</h1>
      <div>
        <h2>Slides</h2>
        <ul>
          {slides.map((slide, index) => (
            <li key={index}>
              {index === activeSlideIndex ? <strong>{slide}</strong> : slide}
              <button onClick={() => removeSlide(index)}>Remove</button>
            </li>
          ))}
        </ul>
      </div>
      <div>
        <h2>Add New Slide</h2>
        <input
          type='text'
          value={newSlideContent}
          onChange={(e) => setNewSlideContent(e.target.value)}
        />
        <button onClick={handleAddSlide}>Add</button>
      </div>
      <div>
        <h2>Controls</h2>
        <button
          onClick={() =>
            activateSlide(
              activeSlideIndex === 0 ? slides.length - 1 : activeSlideIndex - 1
            )
          }
        >
          Previous Slide
        </button>
        <button
          onClick={() => activateSlide((activeSlideIndex + 1) % slides.length)}
        >
          Next Slide
        </button>
      </div>
    </div>
  )
}

API Reference

Hook Signature

useSlideshow<T>(initialItems?: T[] = [], loop?: boolean = false): SlideshowState<T>

Parameters

The useSlideshow hook accepts an optional boolean as its parameter. This allows you to set the looping behavior of your slideshow:

Property	Required	Type	Description
`initialItems`	no	`T[]`	An array of the initial slideshow items
`loop`	no (default: `false`)	`boolean`	Whether the slideshow should loop when its beginning or end is reached

Return Value

useSlideshow returns a SlideshowState<T> object with the following values:

Property	Type	Description
`slides`	`T[]`	An array of the initial slideshow items
`activeSlideIndex`	`number`	The index of the currently active slide
`addSlide`	`(newSlide: T, index?: number): void => {}`	Add a new slide at the end of the slideshow, or at index `index` if specified
`removeSlide`	`(index: number): void => {}`	Remove the slide at index `index`
`activateSlide`	`(index: number): void => {}`	Navigate to (i.e. activate) the slide at index `index`

useSessionStorage useStack