| property | type | default | required | purpose |
| -------- | ---- | ------- | -------- | ------- |
| children | [string|null|node] | null | No | Children is a special React property. Basically, the Dot component wraps other components and/or JSX |
| className | [string|null] | null | No | Optional className string that will be appended to the component's className string. |
| disabled | [boolean|null] | null | No | Null means Dot will automatically determine if this button is disabled. Setting this to true will force the button to be disabled. Setting this to false will prevent the button from ever being disabled. |
| onClick | [function|null] | null | No | Optional callback function that is called after the internal onClick function is called. It is passed the React synthetic event |
| slide | number | | Yes | There must be a matching <Slide /> component with a matching index property. Example: will match |

#### The Dot component creates the following pseudo HTML by default:

`HTML

[props.children]

`

$3

A compound component that creates a bunch of Dots automatically for you.

| property | type | default | required | purpose |
| -------- | ---- | ------- | -------- | ------- |
| children | [string|node|null] | null | No | Any JSX wrapped by this component will appear AFTER the dots. |
| className | [string|null] | null | No | Optional className string that will be appended to the component's className string. |
| dotNumbers | boolean | false | No | Setting to true automatically adds text numbers the dot buttons starting at 1. |
| disableActiveDots | boolean | true | No | Setting to true makes all dots, including active dots, enabled. |
| showAsSelectedForCurrentSlideOnly | boolean | false | No | Setting to true shows only the current slide dot as selected. |
| renderDots | function| null | No | It accepts props and overrides renderDots() in <DotGroup />. |

#### The DotGroup component creates the following pseudo HTML by default:

`HTML


`HTML

[props.children]

`

$3

A button for moving the slider forwards. Forwards on a horizontal carousel means "move to the right". Backwards on a vertical carousel means "move to the bottom". The slider will traverse an amount of slides determined by the step property of CarouselProvider.

| property | type | default | required | purpose |
| -------- | ---- | ------- | -------- | ------- |
| children | [string|node] | | Yes | Children is a special React property. Basically, the ButtonNext component needs to wrap other components and/or JSX |
| className | [string|null] | null | No | Optional className string that will be appended to the component's className string. |
| disabled | [boolean|null] | null | No | Null means ButtonNext will automatically determine if this button is disabled. Setting this to true will force the button to be disabled. Setting this to false will prevent the button from ever being disabled. |
| onClick | [function|null] | null | No | Optional callback function that is called after the internal onClick function is called. It is passed the React synthetic event |

#### The ButtonNext component creates the following pseudo HTML by default:

`HTML

[props.children]

`

$3

Moves the slider to the beginning of the slides.

| property | type | default | required | purpose |
| -------- | ---- | ------- | -------- | ------- |
| children | [string|node] | | Yes | Children is a special React property. Basically, the ButtonFirst component needs to wrap other components and/or JSX |
| className | [string|null] | null | No | Optional className string that will be appended to the component's className string. |
| disabled | [boolean|null] | null | No | Null means ButtonFirst will automatically determine if this button is disabled. Setting this to true will force the button to be disabled. Setting this to false will prevent the button from ever being disabled. |
| onClick | [function|null] | null | No | Optional callback function that is called after the internal onClick function is called. It is passed the React synthetic event |

#### The ButtonFirst component creates the following pseudo HTML by default:

`HTML

[props.children]

`

$3

Moves the slider to the end of the slides (totalSlides - visibleSlides).

| property | type | default | required | purpose |
| -------- | ---- | ------- | -------- | ------- |
| children | [string|node] | | Yes | Children is a special React property. Basically, the ButtonLast component needs to wrap other components and/or JSX |
| className | [string|null] | null | No | Optional className string that will be appended to the component's className string. |
| disabled | [boolean|null] | null | No | Null means ButtonLast will automatically determine if this button is disabled. Setting this to true will force the button to be disabled. Setting this to false will prevent the button from ever being disabled. |
| onClick | [function|null] | null | No | Optional callback function that is called after the internal onClick function is called. It is passed the React synthetic event |

#### The ButtonLast component creates the following pseudo HTML by default:

`HTML

[props.children]

`

$3

Pressing this button causes the slides to automatically advance by CarouselProvider's step property after an interval determined by CarouselProvider's interval property.

| property | type | default | required | purpose |
| -------- | ---- | ------- | -------- | ------- |
| children | [string|node] | null | No | Children is a special React property. Content wrapped by ButtonPlay will appear AFTER the content of childrenPaused and childrenPlaying |
| childrenPaused | [string|node] | null | No | Content to display when the slide show is paused. |
| childrenPlaying | [string|node] | null | No | Content to display when the slide show is playing. |
| className | [string|null] | null | No | Optional className string that will be appended to the component's className string. |
| disabled | [boolean|null] | null | No | Null means ButtonPlay will automatically determine if this button is disabled. Setting this to true will force the button to be disabled. Setting this to false will prevent the button from ever being disabled. |
| onClick | [function|null] | null | No | Optional callback function that is called after the internal onClick function is called. It is passed the React synthetic event |

#### The ButtonPlay component creates the following pseudo HTML by default:

`HTML

[props.childrenPaused]
[props.childrenPlaying]
[props.children]

`

$3

__NOTE: ADVANCED USE ONLY.__

Use this HOC to pass CarouselProvider state properties as props to a component. Basically, your custom component must be an descendant of . It doesn't have to be a direct descendant, it just needs to be between some opening and closing CarouselProvider tags somewhere. For example...

`html
// pseudocode example



`

WithStore has two arguments:

WithStore([component], [mapstateToProps])

- The first argument is the component to wrap (ex: YourComponentHere) and it's required.

- The second argument is optional. It is a "map state to props" function that you must create. This function maps the state of the CarouselProvider to props used by your component. Your "map state to props" function will receive one argument: an object with the current CarouselProvider state. Your function must return an object where the keys are names of props to pass to your component and the values map to properties of the CarouselProvider's state.

Here's more pseudocode. I've listed a bunch of properties that exist in the CarouselProvider.

`javascript
import React from 'react';
import { WithStore } from 'pure-react-carousel';

class YourComponentHere extends React.Component {
// ... stuff
}

export default WithStore(YourComponentHere, state => ({
// these are read only properties. we use the "deepFreeze"
// npm package to make these properties immutable. You don't have to use
// all of these, just pick the ones you need.
currentSlide: state.currentSlide,
disableAnimation: state.disableAnimation,
hasMasterSpinner: state.hasMasterSpinner,
imageErrorCount: state.imageErrorCount,
imageSuccessCount: state.imageSuccessCount,
lockOnWindowScroll: state.lockOnWindowScroll,
masterSpinnerThreshold: state.masterSpinnerThreshold,
naturalSlideHeight: state.naturalSlideHeight,
naturalSlideWidth: state.naturalSlideWidth,
orientation: state.orientation,
slideSize: state.slideSize,
slideTraySize: state.slideTraySize,
step: state.step,
dragStep: state.dragStep,
totalSlides: state.totalSlides,
touchEnabled: state.touchEnabled,
dragEnabled: state.dragEnabled,
visibleSlides: state.visibleSlides,
}));
`

Any component wrapped with WithStore will also receive a prop called carouselStore which contains the method setStoreState which you can use to "safely" (use at your own risk) mutate the CarouselProvider's state. There are other methods in carouselStore. Don't use them.

__setStoreState__: 🦄 🌈 🎂 Use this to mutate any of the properties listed in the WithStore example above. For example, if you want to skip to slide 2 you can put this.props.carouselStore.setStoreState({ currentSlide: 2 }) inside a class method in your component.

More pseudocode.

`javascript
import React from 'react';
import { WithStore } from 'pure-react-carousel';

class YourComponentHere extends React.Component {
// ... stuff

handleClick() {
this.props.carouselStore.setStoreState({ currentSlide: 2 });
}
}

export default WithStore(YourComponentHere);
`

Fun fact: you can add any arbitrary values that you want to the CarouselProvider's state. So, if you have several custom components that need to share data, have at it.

__masterSpinnerError__: 💀 DON'T USE THIS.

__masterSpinnerSuccess__: ⚠️ DON'T USE THIS.

__subscribeMasterSpinner__: 💩 DON'T USE THIS.

__unsubscribeMasterSpinner__: 🔥 DON'T USE THIS.

__unsubscribeAllMasterSpinner__: Don't call this manually unless you have some sort of super-customized carousel. This is called internally once all and all components are finished loading their images. Calling this directly will force a "success" state and the master spinner (the spinner that covers the entire carousel while loading) will turn off.

$3

If you'd like to consume the context via hooks rather than using the HoC approach described above, the context is exported as CarouselContext.

Note that you will likely need to subscribe/unsubscribe to changes in order to take advantage of the context.

Example:

`js
import React, { useContext, useEffect, useState } from 'react';
import { CarouselContext } from 'pure-react-carousel';

export function MyComponentUsingContext() {
const carouselContext = useContext(CarouselContext);
const [currentSlide, setCurrentSlide] = useState(carouselContext.state.currentSlide);
useEffect(() => {
function onChange() {
setCurrentSlide(carouselContext.state.currentSlide);
}
carouselContext.subscribe(onChange);
return () => carouselContext.unsubscribe(onChange);
}, [carouselContext]);
return The current slide is: ${currentSlide};
}
`

TypeScript usage

The current bundled Typescript definitions are mostly complete. Certain edge cases could have been not accounted for! Pull requests to improve them are welcome and appreciated.

If you've never contributed to open source before, then you may find this free video course helpful.

In case of provided components, it is pretty straightforward. Simply import them and pass necessary props. At the moment types will not prevent you from using the library incorrectly (for example rendering Slider outside CarouselProvider) therefore please check the documentation if something goes wrong.

$3

Following the documentation above, only props safe to use are exposed:

`TypeScript
interface CarouselState {
readonly currentSlide: number
readonly disableAnimation: boolean
readonly disableKeyboard: boolean
readonly hasMasterSpinner: boolean
readonly imageErrorCount: number
readonly imageSuccessCount: number
readonly lockOnWindowScroll: boolean
readonly masterSpinnerThreshold: number
readonly naturalSlideHeight: number
readonly naturalSlideWidth: number
readonly orientation: 'horizontal' | 'vertical'
readonly slideSize: number
readonly slideTraySize: number
readonly step: number
readonly dragStep: number
readonly totalSlides: number
readonly touchEnabled: boolean
readonly dragEnabled: boolean
readonly visibleSlides: number
}

export interface CarouselInjectedProps {
readonly carouselStore: {
readonly setStoreState: (state: CarouselState) => void
readonly unsubscribeAllMasterSpinner: () => void
}
}
`

Also the first argument which is the component to wrap, needs to be a React.ComponentClass to render properly and therefore stateless component are not possible.

$3

- Both with MapStateToProps and custom props

`TypeScript
import {
CarouselInjectedProps,
WithStore,
} from 'pure-react-carousel'

interface UpdateCheckProps extends CarouselInjectedProps {
readonly name: string,
}

interface UpdateCheckCarouselState {
readonly currentSlide: number,
readonly disableAnimation: boolean,
}

class InjectedComponent extends Component<
UpdateCheckProps & UpdateCheckCarouselState
> {
public render() {
console.log(this.props)
return




`

- No MapStateToProps

`TypeScript
interface UpdateCheckProps extends CarouselInjectedProps {
readonly name: string,
}

class InjectedComponent extends Component {
public render() {
console.log(this.props)
return

const DecoratedComponent = WithStore(InjectedComponent)
`

Advanced Concept: Accessing the "View" Components Directly

`
Slide/
├─ index.js (model)
├─ Slide.jsx (view)
`

The index file (model) in this instance uses the WithRouter HOC to provide the Slide (view) with
all the data it needs from the carousel state. Stuff like the current slide, size width, height,
etc.

If, for some reason, you want direct access to the "view" for Slider, you can import it directly
by adding "View" to the end of the component name. This works for all components except for
CarouselProvider.

So to access the "view" of Slide, import { SlideView } from 'pure-react-carousel'

More Documentation to Come

I promise to add docs for every component. In the meantime, feel free to download and run the demo app. Looking at the code might help you out.

Dev Workflow

- npm ci See note above about correct Node version. This installs all the necessary dependencies for local development.


- npm start starts a local development server, opens the dev page with your default browser, and watches for changes via livereload.


- npm test runs unit and integration tests using Jest + Enzyme. Also does coverage reporting.


- npm lint runs linting tests using ESLint & Airbnb linting.


- npm test:watch same as npm test but it will watch for updates and auto-run tests. Does not do coverage reporting.


- npm run build compiles CommonJS and ES modules and places them in the dist directory. See note above about correct node Version


- npm run deploy` If you updated the demo app, you need to build the project and then deploy the updates to github.

Contributors

Thanks goes to these wonderful people (emoji key):

Matthew Toledo 💻 🎨 👀 🤔 📆	Timothy Steele 💻 🎨 👀 🤔 📆	Jedrzej Lewandowski 💻	Justin Little 💻	Christoffer Palm 💻	Dylan Pyle 💻	Martin Schwier 💻
Arnaud Ambroselli 💻	Chung 💻	Federico Dionisi 💻	Jakub Jastrzębski 💻	Jean-Paul Delimat 💻	Martin 💻	Per Enström 💻
Serafino Messina 💻	Seth Killian 💻	Tim Chen 💻	Zoey Zou 💻	djshapiro 💻	Brandon Carroll 💻 🚧	Justin Conner 💻
Stéphane Klein 📖	Kevyn Bruyere 💻	Andy Schuler 💻	Mario Hoyos 💻	Nick Randall 👀	Carson Full 💻	Kristaps 💻
Pavel 💻	Sean LeBlanc 💻	Sebastian Martha 💻	Hannes Güdelhöfer 💻	Zach Levine 💻	Alec WM 💻	zhongdeliu 💻
Niko Savas 💻	Bret 💻	Brian B. Canin 💬

This project follows the all-contributors specification. Contributions of any kind welcome!