🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more
Socket
Book a DemoInstallSign in
Socket

@bramus/pagination-sequence

Package Overview
Dependencies
Maintainers
1
Versions
11
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@bramus/pagination-sequence - npm Package Compare versions

Comparing version

to
1.0.1

2

package.json
{
"name": "@bramus/pagination-sequence",
"version": "1.0.0",
"version": "1.0.1",
"description": "Pagination Sequence Generator",

@@ -5,0 +5,0 @@ "type": "module",

@@ -38,6 +38,57 @@ # JavaScript Pagination Sequence Generator

To be clear: this package will only generate an array with values that needs to be shown. You will need to process the array yourself for use within your the JavaScript Framework Du Jour™. You might consider this a limitation.
To be clear: this package will only generate an array with values that needs to be shown. You will need to process the array yourself for use within your the JavaScript Framework Du Jour™, as demonstrated in the Integration Example below. You might consider this a limitation.
## Integration Example (React)
🔗 Try it online: [https://codepen.io/bramus/pen/NWaxNKQ](https://codepen.io/bramus/pen/NWaxNKQ)
```js
import { generate } from "@bramus/pagination-sequence";
const BASE_URL = '#';
const PaginationEntry = ({ value, isCurrent = false }) => {
if (value == '…') {
return (
<li data-pagination-ellipsis><span>…</span></li>
);
}
if (isCurrent) {
return (
<li data-pagination-current><span>{value}</span></li>
);
}
return (
<li>
<a href={`${BASE_URL}/page/${value}`} title={`Go to page ${value}`}>{value}</a>
</li>
);
}
const Pagination = ({ curr, max }) => {
const sequence = generate(curr, max);
// @TODO: Conditionally make the first/prev/next/last links active or inactive, but you get the idea …
return (
<ul className="pagination">
<li data-pagination-first><a href={`${BASE_URL}/page/${1}`} title="First Page">&laquo;</a></li>
<li data-pagination-prev><a href={`${BASE_URL}/page/${curr-1}`} title="Previous Page">&lsaquo;</a></li>
{sequence.map(number =>
<PaginationEntry key={number} value={number} isCurrent={number == curr} />
)}
<li data-pagination-next><a href={`${BASE_URL}/page/${curr+1}`} title="Next Page">&rsaquo;</a></li>
<li data-pagination-last><a href={`${BASE_URL}/page/${max}`} title="Last Page">&raquo;</a></li>
</ul>
);
}
ReactDOM.render(
<Pagination curr="25" max="50" />,
document.getElementById('root')
);
```
## License
`@bramus/pagination-sequence` is released under the MIT public license. See the enclosed `LICENSE` for details.