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

react-pagimagic

v2.0.0

Published

React component to create pagination from your list

Downloads

1,020

Readme

React component to create pagination from your list

Installation

Just run:

yarn install react-pagimagic

or

npm install react-pagimagic

Get started

First of all you need to import it:

import Pagimagic from 'react-pagimagic';

Than, let's assume there is a list of something, which should be splited on pages and paginated:

const YourComponent = (props) => {
  // let's assume that the users list is passing here:
  const { users } = props;

  // your logic how the list should be displayed
  yourRenderLogic = list => {
    return list.map(item => {
      return (
        <div key={item.name}>
          {item.name}
        </div>
      );
    });
  }

  return (
    <Pagimagic
      list={users}
      itemsPerPage={10}
      currentPageIndex={0}
      className="your-class-if-its-necessary"
      maximumVisiblePaginators={5} // the best minimum to be displayed
      renderChildren={this.yourRenderLogic}
    />
  );
}

Also you can pass your own component which will play role of the arrows. Just pass it in the arrow property:

// import from elsewhere:
import MyArrowComponent from './somewhere/MyArrowComponent';
// or create:
const MyArrowComponent = () => <span>ARROW</span>;

const YourComponent = (props) => {
  ...

  return (
    <Pagimagic
      ...
      arrow={MyArrowComponent}
    />
  );
}

Or, if you don't need any default arrows or some text (like prev or next) than just pass arrow property alone (or as anything else except of function or any falsy value).

  return (
    <Pagimagic
      ...
      // like this:
      arrow
      // or even like this
      arrow="jo-ho-ho"
      // but not like this:
      arrow=""
    />
  );
}

It will render absolutely empty spans with just a class name, so you will be able change css or just live it as is. If arrow accept your function to render component - it still will rendered your arrow component in your way. If you pass a falsy value to arrow property(e.g. arrow="") - then you will get prev/next labels instead of arrows.

Counter

You can display counter of elements under pagination:

const YourComponent = (props) => {
  ...

  return (
    <Pagimagic
      ...
      showCounter
    />
  );
}

This will render div.Pagimagic__counter.your-class-if-its-necessary__counter with such content(for the first page): 1-10 of 318

Default styles

Also you can use very primitive default styles by passing useDefaultStyles property:

const YourComponent = (props) => {
  ...

  return (
    <Pagimagic
      ...
      useDefaultStyles
    />
  );
}

And this is basically it. By default you will get list of items(your custom logic not related to Pagimagic) and ready-to-use pagination without styling, so you shouldn't think about overriding styles. Just apply any styles you like.

Pagimagic will render following elements with such classes:

  • .Pagimagic for main wrapper (around list and pagination itself).
  • .Pagimagic.your-className for main wrapper, in case if you've passed your own class via className property. If you passed your own className then all further element will have both and native classes and generated from yours (E.g. .Pagimagic__nav-item will have aditional class: your-className__nav-item).
  • .Pagimagic__nav for pagination navigation.
  • .Pagimagic__nav-item for pagination buttons.
    • .Pagimagic__nav-item active for active pagination button.
    • .Pagimagic__nav-item--prev and .Pagimagic__nav-item--next for previous and next arrows.
  • if you didn't pass a custom arrow to the .Pagimagic, then span.Pagimagic__nav-arrow will be rendered inside .Pagimagic__nav-item--prev and .Pagimagic__nav-item--next.

With application state manager (e.g. Redux)

In order to have more control on how the currentPageIndex is changing, you may use changePageIndex prop, which will provide you the possibility to change the currentPageIndex externally (by default Pagimagic is handling pagination by itself, internally handling changing of the current page index). Just pass inside you action creator, so it will be called whenever user will decide to click either paginator or prev/next arrows.

Redux example

More info

Property | Type | isRequired | Default value | Description :---|:---|:---|:---|:--- list | Array | yes | - | You need to pass an array with elements, so Pagimagic will know, how many pages and pagination buttons build. itemsPerPage | Number | yes | - | How many elements will be shown on one page. currentPageIndex | Number | yes | - | Index of the page which is shown initialy. changePageIndex | Function | no | - | In case of using some application state manager(e.g. Redux) you may need possibility to pass your specific logic for changing currentPageIndex in your application store. For example, you may want to change in your store currentPageIndex whenever user clicks on paginators/arrows. maximumVisiblePaginators | Number | yes | - | How many pagination buttons should be displayed. E.g.: there are 10 pages, and maximumVisiblePaginators is set to 3, so there will be shown only 3 pagination buttons + arrow prev and arrow next, and 7 pagination buttons will be hidden. renderChildren | Function | yes | - | The way how your list should be build. Pagimagic will display your list acording to your logic, and will handle only pagination computation and creation. className | String | no | Pagimagic | If you want to have aditionaly your className. arrow | any | no | span.Pagimagic__nav-arrow | By default the span will be rendered inside the div.Pagimagic__nav-item--prev and div.Pagimagic__nav-item--next with text prev and next respectively. If you don't need this text inside - just pass any not function and not falsy value inside the arrow property, or just live it alone like in the example above. showCounter | Boolean | no | false | You can display counter. E.g.: 10-20 of 241 useDefaultStyles | Boolean | no | false | You can use very basic default styles by passing useDefaultStyles property. Without passing this prop you will get naked pagination.

Demo

History

You can get the CHANGELOG

License

Licensed under MIT license.