@justinc/carousel-component

@justinc/carousel-component

This project was bootstrapped with: nwb

Peer dependencies

This package has a peerDependency on:

"peerDependencies": {
    "react": "16.x",
    "react-jss": "8.6.x"
},

which means these packages must be installed in any project using this package.

Usage

The demo directory contains an example usage of @justinc/carousel-component by importing '"../../src". A module in another package would import this package's main module with "@justinc/carousel-component"` instead.

To get the carousel to work, you need to give it an array of objects (data prop) and a children prop which must be a function (this is a render prop). This component's responsibility is to perform the actual carousel transitions (every 3 seconds by default - see list of props below) and keep track of which item in the carousel to display. It also takes care of stopping the transitions when the document is hidden (e.g. user has moved on to another tab).

E.g. usage:

import Carousel from "@justinc/carousel-component";
// ...
        <Carousel data={data}>
          {({ data, classes, itemIndexToClassName }) => {
            return (
              <div className={classes.carousel}>
                {data.map((d, i) => (
                  <div key={i} className={classes[itemIndexToClassName(i)]}>
                    {d.name}
                  </div>
                ))}
              </div>
            );
          }}
        </Carousel>
// ...

It is important to attach the correct className to the root of each item in the Carousel. The data given to the render prop (the children function prop) is optional to use as you are expected to already have a reference to the data when you create the Carousel element (to pass in as the data prop). To make sure you're attaching the correct className to each item in the Carousel - use the provided itemIndexToClassName function when iterating through your data array to render items for the Carousel. This will make sure the to style all items appropriately (including the previous, current, and next item in the carousel).

All supported props

Name	Type	Default value
data	array of objects	N/A
intervalMilliseconds	number	3000
frozen	boolean	false

If frozen is true the Carousel will not transition every intervalMilliseconds (useful when e.g. writing styles for carousel items or in general during development when the focus is not on transitioning).