react-slicer
React component to separate array of elements on pages with pagination (demo).
Installation
yarn add react-slicer
npm i react-slicer
Usage
; { return <Slicer initialPage=1 itemsPerPage=4 > <div key=1>Item 1</div> <div key=2>Item 2</div> <div key=3>Item 3</div> <div key=4>Item 4</div> <div key=5>Item 5</div> <div key=6>Item 6</div> <div key=7>Item 7</div> <div key=8>Item 8</div> </Slicer> ; } ;
Props
Name | Type | Default | Description |
---|---|---|---|
customClass | string | "react-slicer" | Custom class for component elements. Previous and next buttons classes don't depend on this prop. You should change their classes in prevBtn and nextBtn props. |
initialPage | integer | 1 | Initial page number. |
itemsPerPage | integer | 4 | Items amount on each page. |
pagination | boolean | true | Show or not show pagination. |
nextBtn | string (html) | <span className={'react-slicer__arrow react-slicer__arrow_next'}>{'>'}</span> |
Next arrow template in page number panel. |
prevBtn | string (html) | <span className={'react-slicer__arrow react-slicer__arrow_prev'}>{'<'}</span> |
Previous arrow template in page number panel. |
Methods
Methods can be called on the component. You should use ref
attribute to call them:
<Slicer ref= {thisslicer = component}> ...</Slicer> thisslicer
Function | Arguments | Description |
---|---|---|
prevPage() | - | Switch to the previous page |
nextPage() | - | Switch to the next page |
setPage(index) | index (type: number) - page index |
Switch to the wanted page index. The index argument should be between 1 and number of pages. |