@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