Skip to content

Instantly share code, notes, and snippets.

@alexbenic

alexbenic/Pagination.tsx

Created June 13, 2019 21:37
Show Gist options
  • Save alexbenic/eab85ec4f59615a974337f43c657e936 to your computer and use it in GitHub Desktop.
Save alexbenic/eab85ec4f59615a974337f43c657e936 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. alexbenic created this gist Jun 13, 2019.
    36 changes: 36 additions & 0 deletions Pagination.tsx
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,36 @@
    import React, { Component } from 'react';
    import { Pagination as ReactBootstrapPagination } from 'react-bootstrap';

    interface PaginationProps extends ReactBootstrapPagination.PaginationProps {
    onPaginationItemClick: React.MouseEventHandler;
    totalPages: number;
    activePage: number;
    }

    export class Pagination extends Component<PaginationProps> {
    public render(): JSX.Element {
    const {
    totalPages,
    activePage,
    onPaginationItemClick,
    ...rest
    } = this.props;

    // http://2ality.com/2018/12/creating-arrays.html
    return (
    <ReactBootstrapPagination {...rest}>
    <ReactBootstrapPagination.Prev />
    {Array.from({ length: totalPages }).map((_, i) => (
    <ReactBootstrapPagination.Item
    key={i}
    active={activePage === i + 1}
    onClick={onPaginationItemClick}
    >
    {i + 1}
    </ReactBootstrapPagination.Item>
    ))}
    <ReactBootstrapPagination.Next />
    </ReactBootstrapPagination>
    );
    }
    }