@vlsergey/react-bootstrap-pagination

Ready-to-use wrapper for react-bootstrap Pagation component.

Goal

Do not duplicate same code of for Pagination usage in different projects.

Installation

npm i --save @vlsergey/react-bootstrap-pagination

or

npm i --save-dev @vlsergey/react-bootstrap-pagination

Usage

<Pagination value={5} totalPages={10} readOnly />

<Pagination value={5} totalPages={10} onChange={this.handleChange} />

Important note: value is 0-based unless changed with firstPageValue.

Props

Property	Default value	Description
value	required	Current page. Value is 0-based unless changed with firstPageValue. Displayed page label is value - firstPageValue + 1.
totalPages	undefined	Total number of pages.
onChange		Should be provided if not readOnly or disabled. See below.
name	'page'	Name of component returned in target structure in onChange.
readOnly	false	Allow or do not allow user to change values by clicking on items.
disabled	false	Technically the same as readOnly, but appearance may change in future versions.
firstPageValue	0	Internal value of first page (first page index) used by value and onChange attributes. Usually 0 (default) or 1.
showFirstLast	true	Show or hide '<<' and '>>' items ( <Pagination.First> and <Pagination.Last> )
showPrevNext	true	Show or hide '<' and '>' items ( <Pagination.Prev> and <Pagination.Next> )
atBeginEnd	2	How many first and last pages links to display (in addition to '<<' and '>>')
aroundCurrent	1	How many prev and next linkes to display (in addition to '<<' and '>>')

The argument of onChange is event-alike structure with target property (with name and value subproperties). If one stores page number in state he can use same method as for usual form field:

handlePageChange( { target: { value } } ) {
  this.setState( { page: value } );
}

If you have other fields (like page size), you can specify name property of <Pagination /> and use single handler:

class MyComponent extends PureComponent {
  state = {
    page: 0,
    size: 10,
  }

  handleChange( {target: {name, value }} ) {
    this.setState( { [name]: value } );
  }

  render() {
    const { page, size } = this.state;
    return <>
      <Pagination name="page" value={page} onChange={this.handleChange} />
      <select name="size" value={size} onChange={this.handleChange}>
        <option>5</option>
        <option>10</option>
        <option>25</option>
        <option>50</option>
      </select>
    </>
  }
}

Examples

<Pagination value={7} totalPages={15} />

<Pagination aroundCurrent={3} showFirstLast={false} showPrevNext={false} atBeginEnd={0} value={7} totalPages={15} />

<Pagination showFirstLast={false} showPrevNext={false} value={1} totalPages={3} disabled size="sm" />

Changelog

Undescribed minor versions are for dependencies updates.

3.2.1

• 🐛 Make firstPageValue optional

3.2.0

• 🎨 Allow to change first page value with firstPageValue attribute

3.1.0

• 🎨 Export PropsType and OnChangeEventType interfaces

3.0.2

• 🐛 Add missing key attribute to PaginationItemWrapper in PaginationWrapper

3.0.1

• 🐛 Fixed incorrect implementation of page item click handler

3.0.0

• ✨ Allow totalPages to be undefined
• 🔨 Change from class component to function
• 🔨 Add strict option to TypeScript's compilerOptions
• ⬆️ Migrate to js-config 8.1 with new eslint rules
• 👷 Migrate from TravisCI to GitHub Actions

2.2.4

• 🐛 Fixed infinite cycle when Infinity (Number.POSITIVE_INFINITY) passed as value of totalPages

2.2.3

• 📦 Set target for both CommonJS & ESM to ES5, since WebPack 5 picks ESM and forgot to transpile it with tsc.

2.2.2

• 📦 Set target for CommonJS to ES5

2.2.1

• 🐛 Make optional props optional from TypeScript point of view.

2.2.0

• 📦 Set target for ESM to ES2020
• 🛠 Add properties from bootstrap Pagination to wrapper props (to allow passed down props like style)
• 🛠 Update dependencies

2.1.0

• 📦 Add hybrid CommonJS + ESM packaging.

2.0.0

• ⚡ Move from flow to TypeScript.

1.0.1

• 🐛 Fix main file link in package.json

1.0.0

• 🎉 Initial version