react-responsive-pagination - npm Package Compare versions

Comparing version 2.6.1 to 2.7.0-beta.1

CHANGELOG.md

 # React Responsive Pagination Changelog
 
+# [2.7.0-beta.1](https://github.com/jonelantha/react-responsive-pagination/compare/v2.6.1...v2.7.0-beta.1) (2024-07-22)
+
+
+### Features
+
+* SSR support ([cc80b88](https://github.com/jonelantha/react-responsive-pagination/commit/cc80b88833ace043936f71f6405fc1124a4dd70d))
+
 ## [2.6.1](https://github.com/jonelantha/react-responsive-pagination/compare/v2.6.0...v2.6.1) (2024-07-21)
@@ -4,0 +11,0 @@

dist/hooks/usePaginationItems.js

@@ -13,3 +13,3 @@ import { isValidElement, useEffect } from 'react';
     });
-    const { items: compositionItems, ref, clearCache, } = useWidestComposition(narrowToWideCompositionsProvider, maxWidth);
+    const { visible, items: compositionItems, ref, clearCache, } = useWidestComposition(narrowToWideCompositionsProvider, maxWidth);
     const previousLabelCacheKey = labelCacheKey(options?.previousLabel);
@@ -21,3 +21,3 @@ const nextLabelCacheKey = labelCacheKey(options?.nextLabel);
     const items = compositionToPaginationItems(compositionItems, options);
-    return { items, ref, clearCache };
+    return { visible, items, ref, clearCache };
 }
@@ -24,0 +24,0 @@ function labelCacheKey(item) {

dist/hooks/useWidestComposition.js

@@ -1,2 +0,2 @@
-import { useCallback } from 'react';
+import { useCallback, useState } from 'react';
 import { useAvailableWidth } from './useAvailableWidth.js';
@@ -14,7 +14,10 @@ import { useFoutDetector } from './useFoutDetector.js';
     }, [foutDetectorRef, availableWidthRef]);
-    if (metricsRender) {
+    const [showPlaceholder, setShowPlaceholder] = useState(true);
+    if (showPlaceholder) {
+        const firstComposition = iteratorNext(narrowToWideCompositionsProvider());
         return {
-            items: metricsRender.items,
+            visible: false,
+            items: firstComposition ?? [],
             ref(containerElement) {
-                metricsRender.ref(containerElement);
+                setShowPlaceholder(false);
                 ref(containerElement);
@@ -25,9 +28,19 @@ },
     }
-    else {
+    if (metricsRender) {
         return {
-            items: getLargestFittingCompositionWithFallback(narrowToWideCompositionsProvider, widthCalculator, width),
-            ref,
+            visible: false,
+            items: metricsRender.items,
+            ref(containerElement) {
+                metricsRender.ref(containerElement);
+                ref(containerElement);
+            },
             clearCache,
         };
     }
+    return {
+        visible: true,
+        items: getLargestFittingCompositionWithFallback(narrowToWideCompositionsProvider, widthCalculator, width),
+        ref,
+        clearCache,
+    };
 }
@@ -34,0 +47,0 @@ function getLargestFittingCompositionWithFallback(getNarrowToWideCompositions, getCompositionWidth, maxWidth) {

dist/index.js

@@ -22,3 +22,3 @@ import React, { memo, useEffect } from 'react';
     const { current, total, onPageChange: handlePageChange, maxWidth, narrowBehaviour, className, extraClassName = 'justify-content-center', pageItemClassName = 'page-item', pageLinkClassName = 'page-link', activeItemClassName = 'active', disabledItemClassName = 'disabled', navClassName, previousClassName, nextClassName, previousLabel, nextLabel, ariaPreviousLabel, ariaNextLabel, renderNav = true, ariaCurrentAttr = true, linkHref = 'hash', labelBehaviour: getLabel = defaultLabelBehaviour, } = props;
-    const { items, ref, clearCache } = usePaginationItems(current, total, maxWidth, {
+    const { visible, items, ref, clearCache } = usePaginationItems(current, total, maxWidth, {
         narrowBehaviour,
@@ -57,3 +57,3 @@ previousLabel,
     }
-    return (React.createElement("ul", { className: getContainerClassName(), ref: ref }, items.map(item => item.gotoPage !== undefined ? (
+    return (React.createElement("ul", { className: getContainerClassName(), ref: ref, ...(!visible && { style: { visibility: 'hidden' } }) }, items.map(item => item.gotoPage !== undefined ? (
     // item = ClickableItem
@@ -60,0 +60,0 @@ React.createElement("li", { key: item.key, className: classNames([

package.json

 {
   "name": "react-responsive-pagination",
-  "version": "2.6.1",
+  "version": "2.7.0-beta.1",
   "description": "React component for responsive pagination",
@@ -5,0 +5,0 @@ "author": "jonelantha",

README.md

@@ -21,2 +21,4 @@ # React Responsive Pagination
 
+**⭐️ What's new:** August 2024 - SSR support
+
 **📕 Visit [https://react-responsive-pagination.elantha.com](https://react-responsive-pagination.elantha.com) to get started 🚀**
@@ -23,0 +25,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

88904

increased by2.21%

Number of package files

40

increased by2.56%

Lines of code

1388

increased by2.74%

Number of lines in readme file

134

increased by1.52%

Worsened metrics

Number of low quality alerts

1

increased byInfinity%

No dependency changes