0.5.1 • Published 7 years ago

react-slicer v0.5.1

Weekly downloads
2
License
ISC
Repository
github
Last release
7 years ago

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

NameTypeDefaultDescription
customClassstring"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.
initialPageinteger1Initial page number.
itemsPerPageinteger4Items amount on each page.
paginationbooleantrueShow or not show pagination.
nextBtnstring (html)<span className={'react-slicer__arrow react-slicer__arrow_next'}>{'>'}</span>Next arrow template in page number panel.
prevBtnstring (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()
FunctionArgumentsDescription
prevPage()-Switch to the previous page
nextPage()-Switch to the next page
setPage(index)index (type: number) - page indexSwitch to the wanted page index. The index argument should be between 1 and number of pages.
0.5.1

7 years ago

0.5.0

7 years ago

0.4.2

7 years ago

0.4.1

7 years ago

0.4.0

7 years ago

0.3.0

7 years ago

0.2.5

7 years ago

0.2.4

7 years ago

0.2.3

7 years ago

0.2.2

7 years ago

0.2.1

7 years ago

0.2.0

7 years ago

0.1.3

7 years ago

0.1.2

7 years ago

0.1.1

7 years ago

0.1.0

7 years ago

0.0.3

7 years ago

0.0.2

7 years ago

0.0.1

7 years ago