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