npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@vlsergey/react-bootstrap-pagination

v3.2.1

Published

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

Downloads

797

Readme

@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