npm package: @gdo-bzh/carousel
Description: [![NPM](https://img.shields.io/npm/v/use-carousel-state.svg)](https://www.npmjs.com/package/carousel) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
Author: gdo
Latest version: 1.0.0-rc.10

# carousel

[![NPM](https://img.shields.io/npm/v/use-carousel-state.svg)](https://www.npmjs.com/package/carousel) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

A content carousel with animation support and many customizable options. A carousel is a slideshow for cycling through a series of slides (image, video, audio, text, etc.). You can:

- navigate backward/forward
- navigate to a specific slide
- play/pause the slideshow

This package contains the following core components :

- Carousel: the top-level component that provides a ready-to-use carousel
- Slides: The slides component houses each individual slide
- Controls: component that controls the navigation backward and forward through the slides. It is composed of the PreviousSlideButton and the NextSlideButton components
- PreviousSlideButton: button component that controls the navigation backward through the slides
- NextSlideButton: button component that controls the navigation backward through the slides
- PlayPauseButton: toggle button to play/pause the slideshow
- ProgressDurationIndicator: user feedback to show the duration an image is visble on the screen during slideshow
- NavBar: component that allows to navigate to a specific slide among the complete list
- NavBarItem: the navBar item component composing the navbar component

## Install

```bash
yarn add @gdo-bzh/carousel @gdo-bzh/use-carousel-state react styled-components react-icons

npm install --save @gdo-bzh/carousel @gdo-bzh/use-carousel-state react styled-components react-icons
```

## Usage

```tsx
import React from 'react'

import { Carousel } from '@gdo-bzh/carousel'

const slides= [..., {/* slide i */}, ..., {/* slide n */}]

<Carousel>
    {({ currentIndex }) => (
      <>
        <Carousel.Slides>
          {slides.map((slide, index) => (
            <Slide
              key={slide.id}
              src={slide.src}
              aria-label={`Slide ${index + 1}`}
              style={{ display: index === currentIndex ? 'block' : 'none' }}
            />
          ))}
        </Carousel.Slides>
        {children}
      </>
    )}
  </Carousel>
```

## Api

```tsx
type UseCarouselStateReturnType = ReturnType<typeof useCarouselState>

type Props = React.HTMLAttributes<HTMLDivElement> &
  Partial<State> & {
    children: (state: UseCarouselStateReturnType) => React.ReactNode
  }

type CarouselFC = React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>> & {
  Slides: React.FC
  Controls: React.FC<React.ComponentProps<typeof Controls>>
  PreviousSlideButton: React.FC<React.ComponentProps<typeof PreviousSlideButton>>
  NextSlideButton: React.FC<React.ComponentProps<typeof NextSlideButton>>
  PlayPauseButton: React.FC<React.ComponentProps<typeof PlayPauseFab>>
  ProgressDurationIndicator: React.FC<React.ComponentProps<typeof ProgressDurationIndicator>>
  NavBar: React.FC<React.ComponentProps<typeof NavBar>>
  NavBarItem: React.FC<React.ComponentProps<typeof NavBarItem>>
}
```

## License

MIT © [gdo-bzh](https://github.com/gdo-bzh)