@guins/use-simple-carousel
TypeScript icon, indicating that this package has built-in type declarations

0.1.2 • Public • Published

@guins/use-simple-carousel

Simple Carousel React Hook - Manage the state of sequential elements being associated as carousel without any markup constraint

NPM JavaScript Style Guide

Install

npm install --save @guins/use-simple-carousel

Usage

See complete examples here

import * as React from 'react'
import { useEffect } from 'react'

import { useSimpleCarousel } from '@guins/use-simple-carousel'

export function FakeCarousel() {
  const itemsLength = 5 // number of items in your carousel
  const autoPlayInterval = 1000 // interval in milliseconds (no autoPlay if 0) [default = 0]
  const initialIndex = 0 // initial carousel index [default = 0]
  const {carouselState, next, prev, goTo, onTransitionComplete} = useSimpleCarousel(itemsLength, autoPlayInterval, initialIndex)

  useEffect(() => {
    console.log('didUpdate', carouselState)

    if(carouselState.isTransitioning) {
      // custom transition here (don't forget to call `onTransitionComplete` callback after)
      onTransitionComplete()
    }
  }, [carouselState, onTransitionComplete])

  return null
}

License

MIT © guins


This hook is created using create-react-hook.

Readme

Keywords

none

Package Sidebar

Install

npm i @guins/use-simple-carousel

Weekly Downloads

12

Version

0.1.2

License

MIT

Unpacked Size

625 kB

Total Files

29

Last publish

Collaborators

  • guins