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