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 ?!