Wondering what’s next for npm?Check out our public roadmap! »

    react-pagimagic

    1.4.0 • Public • Published

    React component to create pagination from your list

    travis-web total downloads opened issues closed issues

    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.

    Install

    npm i react-pagimagic

    DownloadsWeekly Downloads

    6

    Version

    1.4.0

    License

    MIT

    Last publish

    Collaborators

    • avatar