@mirumshopper/react-pagedset
Common set component for containing other components and providing pagination functionality.
Installation
Using npm:
$ npm i --save @mirumshopper/react-pagedset
Usage
// using ES6 modules
import PagedSet from '@mirumshopper/react-pagedset'
Using Child Elements
It will pick up child elements as the pages, if passed:
<PagedSet>
<img src='image1.jpg' />
<img src='image2.jpg' />
<img src='image3.jpg' />
</PagedSet>
Using the Set Attribute
The set attribute can be passed an array of objects containing an element and properties to pass to that element:
<PagedSet
set={[
{element: 'img', src: 'image1.jpg'},
{element: 'img', src: 'image2.jpg'},
{element: 'img', src: 'image3.jpg'}
]}
/>
Tabbed Pagination
Add an array of values for the tabs property:
<PagedSet tabs={['Page 1', 'Page 2', 'Page 3']}>
<img src='image1.jpg' />
<img src='image2.jpg' />
<img src='image3.jpg' />
</PagedSet>
Infinite Scrolling
Add isInfinite={true} to the element.
<PagedSet isInfinite={true}>
<img src='image1.jpg' />
<img src='image2.jpg' />
<img src='image3.jpg' />
</PagedSet>
Demo
Demos are available under demo/index.html
JS Docs
Documents are available under jsdocs/index.html
License
(c) Copyright 2018 Mirum, all rights reserved.
This code is NOT licensed for use other than the commercial interests of Mirum.
Version History
- 0.0.6 - Added child event bubbling
- 0.0.4 - Added License and Version History to README.md
- 0.0.3 - Added demos, README.md