README
React View Pager (Prerelease)
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>
Props ViewPager
: PropTypes.string tag
The HTML tag for this element. Defaults to div
.
Props Frame
: PropTypes.string tag
The HTML tag for this element. Defaults to div
.
: PropTypes.oneOf([true, false, 'width', 'height']) autoSize
Animates the wrapper's width and/or height to fit the current view. Defaults to false
.
: PropTypes.bool accessibility
Enable tabbing and keyboard navigation.
: React.PropTypes.objectOf(React.PropTypes.number) springConfig
Accepts a React Motion spring config.
Props Track
: PropTypes.string tag
The HTML tag for this element. Defaults to div
.
: PropTypes.any currentView
Specify the index or key of a view to move to that view. Use with onViewChange
to control the state of the pager.
: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(['auto'])]) viewsToShow
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.
: PropTypes.number viewsToMove
The number of views to move upon using prev
and next
methods. Defaults to 1
.
: PropTypes.number align
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.
: PropTypes.bool contain
Prevents empty space from showing in frame. Defaults to false
.
: PropTypes.bool infinite
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!
: PropTypes.bool instant
Move to a view instantly without any animation. This will control the internal instant
state inside of the component.
: PropTypes.oneOf(['x', 'y']) axis
Which axis the track moves on. Defaults to x
.
: PropTypes.array animations
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]
]
}]
: PropTypes.oneOf([true, false, 'touch', 'mouse']) swipe
Enable touch and/or mouse dragging. Defaults to true
.
: PropTypes.number swipeThreshold
The amount the user must swipe to advance views. (frameWidth * swipeThreshold)
. Defaults to 0.5
.
: PropTypes.number flickTimeout
The amount of time in milliseconds that determines if a swipe was a flick or not.
: PropTypes.bool (Coming Soon) rightToLeft
: PropTypes.bool (Coming Soon) lazyLoad
: React.PropTypes.objectOf(React.PropTypes.number) springConfig
Accepts a React Motion spring config.
: PropTypes.func onSwipeStart
Prop callback fired before swipe.
: PropTypes.func onSwipeMove
Prop callback fired during swipe.
: PropTypes.func onSwipeEnd
Prop callback fired after swipe.
: PropTypes.func onScroll
Prop callback fired when track is scrolling. Useful for parallax or progress bars.
: PropTypes.func onViewChange
Prop callback fired when view changes. Passes back the newly selected indicies.
: PropTypes.func onRest
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.
Props View
: PropTypes.string tag
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/