nshaphan/react-view-pager

Slider/Carousel powered by React Motion.

⚠️ NO LONGER MAINTAINED

This library is no longer being maintained. Please use framer-motion or another animation library to power your view pagers.

React View Pager

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

Note before using

Use at your own risk, API's are subject to change. It's been fairly stable these last few months, but still might change slightly. Once the outstanding issues are fixed I will release 1.0.0.

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/