@bramus/pagination-sequence - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

package.json

 {
   "name": "@bramus/pagination-sequence",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Pagination Sequence Generator",
@@ -5,0 +5,0 @@ "type": "module",

README.md

@@ -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.

No alert changes

Improved metrics

Total package byte prevSize

15657

10.96%

Number of lines in readme file

94

118.6%

No dependency changes