react-reslide

react-reslide

A slider component for React. Click here for a demo.

Installation

npm

npm install react-reslide --save

yarn

yarn add react-reslide

Usage

Basic

import React from 'react'
import { render } from 'react-dom'

import {
  Reslide,
  Slides,
  Slide,
  Controls,
  PrevButton,
  NextButton
} from 'react-reslide'

const App = () => {
  return (
    <Reslide>
      <Slides>
        <Slide>
          <img src="https://farm9.staticflickr.com/8666/15944458013_1a100cc8e0_z_d.jpg" />
        </Slide>
        <Slide>
          <img src="https://farm2.staticflickr.com/1069/1243141435_eb6bf658f4_z_d.jpg" />
        </Slide>
        <Slide>
          <img src="https://farm9.staticflickr.com/8068/8243640236_72bf897740_z_d.jpg" />
        </Slide>
      </Slides>
      <Controls>
        <PrevButton />
        <NextButton />
      </Controls>
    </Reslide>
  )
}

render(<App />, document.getElementById('root'))

Render props

Slide, PrevButton, and NextButton accept a render prop which grands access to the component's props. This allows for more control on how children is rendered.

import React from 'react'
import { render } from 'react-dom'

import {
  Reslide,
  Slides,
  Slide,
  Controls,
  PrevButton,
  NextButton
} from 'react-reslide'

const App = () => {
  return (
    <Reslide>
      <Slides>
        <Slide>
          <img src="https://farm9.staticflickr.com/8666/15944458013_1a100cc8e0_z_d.jpg" />
        </Slide>
        <Slide>
          <img src="https://farm2.staticflickr.com/1069/1243141435_eb6bf658f4_z_d.jpg" />
        </Slide>
        <Slide
          render={{ children, preloadContent, isActive } => {
            return preloadContent ? (
              <div
                style={{
                  display: isActive ? 'block' : 'none'
                }}
              >
                {children}
              </div>
            ) : isActive ? (
              <div>{children}</div>
            ) : null
          }}
        >
          <img src="https://farm9.staticflickr.com/8068/8243640236_72bf897740_z_d.jpg" />
        </Slide>
      </Slides>
      <Controls>
        <PrevButton
          render={{ children, slide, isDisabled } => {
            return (
              <button
                disabled={isDisbaled}
                onClick={!isDisbaled ? () => slide() : null}
              >
                {children}
              </button>
            )
          }}
        >
          Prev
        </PrevButton>
        <NextButton>Next</NextButton>
      </Controls>
    </Reslide>
  )
}

render(<App />, document.getElementById('root'))

API

Reslide

Root component that wraps Slides and Controls.

Props:

className (string): Set className of underlying div.

preloadContent (bool): If false, content of Slide will load/render when isActive is true. If true, set display to either none (isActive is false) or block (isActive is true).

---

Slides

Wraps Slide.

---

Slide

Wraps children (e.g. text, images, or other components).

Props:

className (string): Set className of underlying div.

preloadContent (bool): Prop passed through from Reslide.

isActive (bool): Whether Slide is active (true) or not (false).

render (func): Render prop.

---

Controls

Wraps PrevButton and NextButton.

Props:

className (string): Set className of underlying div.

---

PrevButton

Shows previous Slide (if available) when clicked.

Props:

slide (func): Shows previous Slide when called.

isDisabled (bool): Is true when there is no previous Slide.

render (func): Render prop.

---

NextButton

Shows next Slide (if available) when clicked.

Props:

slide (func): Shows next Slide when called.

isDisabled (bool): Is true when there is no next Slide.

render (func): Render prop.