react-slicer

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

Installation

yarn add react-slicer

npm i react-slicer

Usage

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

class App extends Component {
  render() {
    
    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>
    );
  }
}

export default App;

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={(component) => {this.slicer = component}}>
    ...
</Slicer>

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