1.0.8 • Published 4 years ago
react-pagination-list v1.0.8
react-pagination-list
React component show the list with paging support
Install
Through npm
npm install react-pagination-list --save
Required
node >= 8.
npm >= 6.
react, react-dom >= 16.8.0.
Usage
ES6
import PaginationList from 'react-pagination-list';
ES5
const PaginationList = require('react-pagination-list');
Typescript
import * as PaginationList from 'react-pagination-list';
Props
data
data is a plain array
TYPE | REQUIRED | DEFAULT |
---|---|---|
array | yes | [] |
pageSize
Config of page size, hide it by setting it to undefined
pageSize={number}
TYPE | REQUIRED | DEFAULT |
---|---|---|
number | no | undefined |
renderItem
Takes an item from data and renders it into the list.
renderItem(item, key);
TYPE | REQUIRED | DEFAULT |
---|---|---|
Function | yes | undefined |
- item (Object): The item from data being rendered.
- key (number): The index corresponding to this item in the data array.
Examples
import React, { Component } from 'react';
import PaginationList from 'react-pagination-list';
export default class MyComponent extends Component {
state = {
data: [
{
id: 1,
name: "Johnson"
},
{
id: 2,
name: "David"
},
{
id: 3,
name: "Alice"
}
]
}
render(){
return (
<PaginationList
data={this.state.data}
pageSize={2}
renderItem={(item, key) => (
<p key={key}>{item.name}</p>
)}
>
)
}
}