React Dynamic ViewPager
Switch dynamically page with the mouse or touch operation.
Usage
minimal case.
import React from 'react';
import { render } from 'react-dom';
import ViewPager from 'react-dynamic-viewpager';
function Page(props) {
const { index, data } = props;
return (
<div>
<p>Page {index+1}</p>
<p>{data}</p>
</div>
);
}
const data = [
'test 1',
'test 2',
'test 3',
'test 4',
'test 5'
];
render(
<ViewPager data={data}>
<Page />
</ViewPager>,
document.getElementById('app')
);
Props
Name | Type | Default | Description |
---|---|---|---|
data (required) | array | List of page data. | |
index | number | 0 | The index of the current page. |
onChange | function | A callback fired when the page index has been changed. (newIndex, oldIndex) => {}
|