Miss any of our Open RFC calls?Watch the recordings here! »

@unleashit/pagination

0.10.2 • Public • Published

Pagination

NPM npm (scoped) npm bundle size

Responsive pagination component for React in Typescript. Just give it a total, current offset and handler and it returns the new offset as needed

pagination component

Install

npm install @unleashit/pagination

Required peer dependency: react

Example

import React from 'react';
import Pagination from '@unleashit/pagination';
import { getData } from 'dataService';
 
export class PaginationDemo extends React.Component {
  constructor(props) {
    super(props);
 
    this.state = {
      offset: 0,
      data: null
    };
    this.perPage = 10;
 
    this.paginationHandler = this.paginationHandler.bind(this);
  }
 
  async componentDidMount() {
    const data = await getData();
    setState({ data });
  }
 
  getCurrentPage() {
    const { data, offset } = this.state;
    return data.slice(offset, offset + this.perPage);
  }
 
  paginationHandler(newOffset) {
    this.setState({ offset: newOffset });
  }
 
  render() {
    const { data } = this.state;
    if (!data) return <div>Loading...</div>;
    if (!data.length) return <div>No items found.</div>;
 
    return (
      <div>
        <ItemList data={this.getCurrentPage()} />
        <Pagination
          currentOffset={this.state.offset}
          perPage={this.perPage}
          paginationHandler={this.paginationHandler}
          total={data.length}
        />
      </div>
    );
  }
}

CSS

Basic namespaced (BEM) css can be imported: import '@unleashit/pagination/dist/pagination.css'. CSS Module support is baked in. If you use CSS Modules you can import styles from '@unleashit/pagination/dist/pagination.module.css' or import your own custom module targeting the internal classes and pass to the cssModuleStyles prop. Please see CSS in the main readme of the repo for more info.

Props

Name Type Description default
perPage Number Number of items per page 10
currentOffset Number Current offset of the list 0 (required)
total Number Total number of items 0 (required)
paginationHandler Function The method to call when a page or prev/next button is clicked. Provides the next offset as an argument. required
prevLabel String Label for previous button 'prev'
nextLabel String Label for next button 'next'

Install

npm i @unleashit/pagination

DownloadsWeekly Downloads

7

Version

0.10.2

License

MIT

Unpacked Size

115 kB

Total Files

29

Last publish

Collaborators

  • avatar