https://github.com/react-bootstrap/pagination

A batteries included pagination component using bootstrap styles
https://github.com/react-bootstrap/pagination

Last synced: 9 months ago
JSON representation

A batteries included pagination component using bootstrap styles

• Host: GitHub
• URL: https://github.com/react-bootstrap/pagination
• Owner: react-bootstrap
• License: mit
• Created: 2017-04-25T19:40:12.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2023-12-15T14:26:24.000Z (about 2 years ago)
• Last Synced: 2024-09-19T01:39:42.387Z (over 1 year ago)
• Language: JavaScript
• Size: 49.8 KB
• Stars: 6
• Watchers: 7
• Forks: 9
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# pagination

A batteries included pagination component using bootstrap styles. This was

extracted from an older version of react-bootstrap as a migration path.

> **NOT ACTIVELY MAINTAINED:** We recommend you eventually migrate to a more

robust, better maintained solution, such as react-ultimate-pagination

It is a drop-in replacement for the old Pagination component in react-bootstrap (<= 0.30.x).

## Alternatives

For users of newer versions of React-Bootstrap we recommend something simpler and more dedicated to providing proper pagination logic. One good general option is react-ultimate-pagination which can be used with react-bootstrap components easily like:

```js

import React from 'react';

import Pagination from 'react-bootstrap/lib/Pagination';

import { createUltimatePagination, ITEM_TYPES } from 'react-ultimate-pagination';

 

export default createUltimatePagination({

  WrapperComponent: Pagination,

  itemTypeToComponent: {

    [ITEM_TYPES.PAGE]: ({value, isActive, onClick}) => (

      {value}

    ),

    [ITEM_TYPES.ELLIPSIS]: ({ isActive, onClick }) => (

      

    ),

    [ITEM_TYPES.FIRST_PAGE_LINK]: ({ isActive, onClick }) => (

      

    ),

    [ITEM_TYPES.PREVIOUS_PAGE_LINK]: ({ isActive, onClick }) => (

      

    ),

    [ITEM_TYPES.NEXT_PAGE_LINK]: ({ isActive, onClick }) => (

      

    ),

    [ITEM_TYPES.LAST_PAGE_LINK]: ({ isActive, onClick }) => (

      

    ),

  },

});

```