react-slicer

React component to separate array of elements on pages with pagination (demo).

$3

``
yarn add react-slicer
`

`
npm i react-slicer
`

$3

`js
import React, { Component } from 'react';
import Slicer from 'react-slicer'
import 'react-slicer/build/react-slicer.css'

class App extends Component {
render() {

return (
initialPage={1}
itemsPerPage={4}
>


export default App;
`


$3

| 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) | {'>'} | Next arrow template in page number panel.|
| prevBtn | string (html) | {'<'} | Previous arrow template in page number panel.|

$3

Methods can be called on the component. You should use ref attribute to call them:

`js
{this.slicer = component}}>
...


this.slicer.nextPage()
`

| 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. |