React View Pager (Prerelease)

View-Pager/Slider/Carousel powered by React Motion.

Usage

yarn add react-view-pager

npm install react-view-pager --save

<script src="https://unpkg.com/react-view-pager/dist/react-view-pager.js"></script>
(UMD library exposed as `ReactViewPager`)

Example

import { ViewPager, Frame, Track, View } from 'react-view-pager'

<ViewPager tag="main">
  <Frame className="frame">
    <Track
      ref={c => this.track = c}
      viewsToShow={2}
      infinite
      className="track"
    >
      <View className="view">1</View>
      <View className="view">2</View>
      <View className="view">3</View>
      <View className="view">4</View>
    </Track>
  </Frame>
  <nav className="pager-controls">
    <a
      className="pager-control pager-control--prev"
      onClick={() => this.track.prev()}
    >
      Prev
    </a>
    <a
      className="pager-control pager-control--next"
      onClick={() => this.track.next()}
    >
      Next
    </a>
  </nav>
</ViewPager>

ViewPager Props

tag: PropTypes.string

The HTML tag for this element. Defaults to div.

Frame Props

tag: PropTypes.string

The HTML tag for this element. Defaults to div.

autoSize: PropTypes.oneOf([true, false, 'width', 'height'])

Animates the wrapper's width and/or height to fit the current view. Defaults to false.

accessibility: PropTypes.bool

Enable tabbing and keyboard navigation.

springConfig: React.PropTypes.objectOf(React.PropTypes.number)

Accepts a React Motion spring config.

Track Props

tag: PropTypes.string

The HTML tag for this element. Defaults to div.

currentView: PropTypes.any

Specify the index or key of a view to move to that view. Use with onViewChange to control the state of the pager.

viewsToShow: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(['auto'])])

The number of views visible in the frame at one time. Defaults to 1. Use auto to respect the views's natural or defined dimensions.

viewsToMove: PropTypes.number

The number of views to move upon using prev and next methods. Defaults to 1.

align: PropTypes.number

Pass any number to offset the view from the start of the track. For example, 0 aligns to the start of the track, 0.5 to the center, and 1 aligns to the end.

contain: PropTypes.bool

Prevents empty space from showing in frame. Defaults to false.

infinite: PropTypes.bool

Prepare your pager for intergalactic space travel. Allows the track to wrap to the beginning/end when moving to a view. To infinity and beyond!

instant: PropTypes.bool

Move to a view instantly without any animation. This will control the internal instant state inside of the component.

axis: PropTypes.oneOf(['x', 'y'])

Which axis the track moves on. Defaults to x.

animations: PropTypes.array

Define a limitless array of animation stops. Each object in the array requires a prop and stops property along with an optional unit property.

// scale and fade views as they enter and leave
const animations = [{
  prop: 'scale',
  stops: [
    [-200, 0.85],
    [0, 1],
    [200, 0.85]
  ]
}, {
  prop: 'opacity',
  stops: [
    [-200, 0.15],
    [0, 1],
    [200, 0.15]
  ]
}]

swipe: PropTypes.oneOf([true, false, 'touch', 'mouse'])

Enable touch and/or mouse dragging. Defaults to true.

swipeThreshold: PropTypes.number

The amount the user must swipe to advance views. (frameWidth * swipeThreshold). Defaults to 0.5.

flickTimeout: PropTypes.number

The amount of time in milliseconds that determines if a swipe was a flick or not.

rightToLeft: PropTypes.bool (Coming Soon)

lazyLoad: PropTypes.bool (Coming Soon)

springConfig: React.PropTypes.objectOf(React.PropTypes.number)

Accepts a React Motion spring config.

onSwipeStart: PropTypes.func

Prop callback fired before swipe.

onSwipeMove: PropTypes.func

Prop callback fired during swipe.

onSwipeEnd: PropTypes.func

Prop callback fired after swipe.

onScroll: PropTypes.func

Prop callback fired when track is scrolling. Useful for parallax or progress bars.

onViewChange: PropTypes.func

Prop callback fired when view changes. Passes back the newly selected indicies.

onRest: PropTypes.func

Prop callback fired after track scrolling animation settles.

Public methods

prev

Moves to the previous view.

next

Advances to the next view.

scrollTo

Scroll to a view by it's index or key.

View Props

tag: PropTypes.string

The HTML tag for this element. Defaults to div.

Running Locally

clone repo

git clone git@github.com:souporserious/react-view-pager.git

move into folder

cd ~/react-view-pager

install dependencies

npm install

run dev mode

npm run dev

open your browser and visit: http://localhost:8080/