react-view-pager

React View Pager (Prerelease)


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

!react-motion-slider

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

``html

(UMD library exposed as ReactViewPager)
`

Example


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

ref={c => this.track = c}
viewsToShow={2}
infinite
className="track"
>
1
2
3
4

`

ViewPager Props

$3


The HTML tag for this element. Defaults to div.

Frame Props

$3


The HTML tag for this element. Defaults to div.

$3

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

$3

Enable tabbing and keyboard navigation.

$3

Accepts a React Motion spring config.

Track Props

$3


The HTML tag for this element. Defaults to div.

$3

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

$3

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.

$3

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

$3

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.

$3

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

$3

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!

$3

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

$3

Which axis the track moves on. Defaults to x.

$3

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

`js
// 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]
]
}]
`

$3

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

$3

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

$3

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

$3

$3

$3

Accepts a React Motion spring config.

$3

Prop callback fired before swipe.

$3

Prop callback fired during swipe.

$3

Prop callback fired after swipe.

$3

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

$3

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

$3

Prop callback fired after track scrolling animation settles.

$3

$3

Moves to the previous view.

$3

Advances to the next view.

$3

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

View Props

$3


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/`