sui-pagination

1.0.0 • Public • Published

sui-pagination

Description

Component to render a pagination, with basic logic to show or not "Next" and "Previous" page related to the current page, and a handle

Usage

Render component with the next props:

  • firstLastSeparatorText : Optional prop to set the first and last pagination separator (by default an elipsis).
  • handlePaginate : Required prop to set the function to be triggered on click of a pagination item.
  • nextText : Optional prop to set the next text (by default "Next").
  • currentPage : Required prop to set the current page.
  • prevText : Optional prop to set the prev text (by default "Prev").
  • showFirstLast : Optional prop to show or not first and last pagination items separated by an elipsis by default.
  • totalPages : Required prop to set the total pages.
  • window : Required prop to set how many pages are shown in the pagination before and after the current page.

An example of the sui-pagination component implementation is:

// JSX file
const handlePaginate = (pageNumber, event) => {
  console.log(`Go to page: ${pageNumber}`);
  event.preventDefault();
};
 
ReactDom.render(
    <Pagination currentPage={20} showFirstLast={true} totalPages={40} window={10} handlePaginate={handlePaginate} />,
document.getElementById('main')
);

Instalation

Clone this repository and run:

$ npm install

Start working in development mode:

$ npm run dev

This command will build your .sass, .jsx and .js files and open a local development environment, with hot reloading. A browser window will be opened as well, showing the entry point of your documents folder for development purposes.

To work in TDD mode:

$ npm run test:watch

To run unit tests only once:

$ npm test

To publish yours docs page:

$ npm run doc

That will publish in a gh-page for docs folder. What is a component without a public demo, isn´t ?!

Package Sidebar

Install

npm i sui-pagination

Weekly Downloads

1

Version

1.0.0

License

none

Last publish

Collaborators

  • schibstedspain