UNPKG

sui-pagination

Version:

## 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

59 lines (49 loc) 1.94 kB
# 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: ```javascript // 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 ?!