@vlsergey/react-bootstrap-pagination

3.2.1 • Public • Published

@vlsergey/react-bootstrap-pagination

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

NPM version Build Status Downloads

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

1.0.1

  • 🐛 Fix main file link in package.json

1.0.0

  • 🎉 Initial version

Package Sidebar

Install

npm i @vlsergey/react-bootstrap-pagination

Weekly Downloads

157

Version

3.2.1

License

MIT

Unpacked Size

50 kB

Total Files

44

Last publish

Collaborators

  • vlsergey