react-slicer

0.5.1 • Public • Published

npm version

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.

Package Sidebar

Install

npm i react-slicer

Weekly Downloads

1

Version

0.5.1

License

ISC

Unpacked Size

300 kB

Total Files

14

Last publish

Collaborators

  • dima_bur