react-responsive-pagination - npm Package Compare versions

Comparing version 1.4.1 to 1.5.0-beta.1

CHANGELOG.md

 # React Responsive Pagination Changelog
 
+# [1.5.0-beta.1](https://github.com/jonelantha/react-responsive-pagination/compare/v1.4.1...v1.5.0-beta.1) (2022-06-13)
+
+
+### Bug Fixes
+
+* Package updates ([0b537b1](https://github.com/jonelantha/react-responsive-pagination/commit/0b537b1a391446f1f3fec3d218e9ac389a055574))
+
+
+### Features
+
+* Props for overriding classNames ([606a22b](https://github.com/jonelantha/react-responsive-pagination/commit/606a22bcdb07b38fc8a5e660ab78b5a08f8006ac))
+
 ## [1.4.1](https://github.com/jonelantha/react-responsive-pagination/compare/v1.4.0...v1.4.1) (2022-05-03)
@@ -4,0 +16,0 @@

lib.cjs/hooks/usePaginationItems.d.ts

@@ -7,2 +7,3 @@ export declare function usePaginationItems(inputCurrent: number, inputTotal: number, maxWidth: number | undefined, options?: {
     ref: (element: HTMLElement | null) => void;
+    clearCache: () => void;
 };

lib.cjs/hooks/usePaginationItems.js

@@ -40,4 +40,4 @@ "use strict";
     });
-    return { items: amendedItems, ref: ref };
+    return { items: amendedItems, ref: ref, clearCache: clearCache };
 }
 exports.usePaginationItems = usePaginationItems;

lib.cjs/index.d.ts

@@ -5,3 +5,3 @@ import React from 'react';
 export default _default;
-declare function BootstrapPagination({ current, total, onPageChange: handlePageChange, maxWidth, extraClassName, previousLabel, nextLabel, }: BootstrapPaginationProps): JSX.Element | null;
+declare function BootstrapPagination({ current, total, onPageChange: handlePageChange, maxWidth, className, extraClassName, pageItemClassName, pageLinkClassName, activeItemClassName, disabledItemClassName, srOnlyClassName, previousLabel, nextLabel, }: BootstrapPaginationProps): JSX.Element | null;
 declare namespace BootstrapPagination {
@@ -13,3 +13,10 @@ var propTypes: {
         maxWidth: PropTypes.Requireable<number>;
+        className: PropTypes.Requireable<string>;
         extraClassName: PropTypes.Requireable<string>;
+        pageItemClassName: PropTypes.Requireable<string>;
+        pageLinkClassName: PropTypes.Requireable<string>;
+        activeItemClassName: PropTypes.Requireable<string>;
+        disabledItemClassName: PropTypes.Requireable<string>;
+        disabledLinkClassName: PropTypes.Requireable<string>;
+        srOnlyClassName: PropTypes.Requireable<string>;
         previousLabel: PropTypes.Requireable<string>;
@@ -24,5 +31,12 @@ nextLabel: PropTypes.Requireable<string>;
     maxWidth?: number;
+    className?: string;
     extraClassName?: string;
+    pageItemClassName?: string;
+    pageLinkClassName?: string;
+    activeItemClassName?: string;
+    disabledItemClassName?: string;
+    disabledLinkClassName?: string;
+    srOnlyClassName?: string;
     previousLabel?: string;
     nextLabel?: string;
 };

lib.cjs/index.js

@@ -36,21 +36,44 @@ "use strict";
 function BootstrapPagination(_a) {
-    var current = _a.current, total = _a.total, handlePageChange = _a.onPageChange, maxWidth = _a.maxWidth, _b = _a.extraClassName, extraClassName = _b === void 0 ? 'justify-content-center' : _b, previousLabel = _a.previousLabel, nextLabel = _a.nextLabel;
-    var _c = (0, usePaginationItems_1.usePaginationItems)(current, total, maxWidth, {
+    var current = _a.current, total = _a.total, handlePageChange = _a.onPageChange, maxWidth = _a.maxWidth, className = _a.className, _b = _a.extraClassName, extraClassName = _b === void 0 ? 'justify-content-center' : _b, _c = _a.pageItemClassName, pageItemClassName = _c === void 0 ? 'page-item' : _c, _d = _a.pageLinkClassName, pageLinkClassName = _d === void 0 ? 'page-link' : _d, _e = _a.activeItemClassName, activeItemClassName = _e === void 0 ? 'active' : _e, _f = _a.disabledItemClassName, disabledItemClassName = _f === void 0 ? 'disabled' : _f, _g = _a.srOnlyClassName, srOnlyClassName = _g === void 0 ? 'sr-only' : _g, previousLabel = _a.previousLabel, nextLabel = _a.nextLabel;
+    var _h = (0, usePaginationItems_1.usePaginationItems)(current, total, maxWidth, {
         previousLabel: previousLabel,
         nextLabel: nextLabel,
-    }), items = _c.items, ref = _c.ref;
+    }), items = _h.items, ref = _h.ref, clearCache = _h.clearCache;
+    (0, react_1.useEffect)(function () {
+        return function () { return clearCache(); };
+    }, [
+        clearCache,
+        className,
+        pageItemClassName,
+        pageLinkClassName,
+        activeItemClassName,
+        disabledItemClassName,
+        srOnlyClassName,
+    ]);
     if (items.length === 0)
         return null;
-    var className = 'pagination';
-    if (extraClassName) {
-        className += ' ' + extraClassName;
+    function getContainerClassName() {
+        if (className !== undefined) {
+            return className;
+        }
+        else if (extraClassName) {
+            return "pagination ".concat(extraClassName);
+        }
+        else {
+            return 'pagination';
+        }
     }
-    return (react_1.default.createElement("ul", { className: className, ref: ref }, items.map(function (item) {
+    function getLabel(label, a11yLabel) {
+        return a11yLabel ? (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement("span", { "aria-hidden": "true" }, label),
+            react_1.default.createElement("span", { className: srOnlyClassName }, a11yLabel))) : (label);
+    }
+    return (react_1.default.createElement("ul", { className: getContainerClassName(), ref: ref }, items.map(function (item) {
         return item.gotoPage !== undefined ? (
         // item = ClickableItem
-        react_1.default.createElement("li", { key: item.key, className: "page-item".concat(item.active ? ' active' : '') },
-            react_1.default.createElement("a", { className: "page-link", href: "#", onClick: (0, dom_1.preventDefault)(function () { return handlePageChange(item.gotoPage); }), "aria-label": item.a11yLabel }, getLabel(item.label, item.a11yLabel)))) : (
+        react_1.default.createElement("li", { key: item.key, className: "".concat(pageItemClassName).concat(item.active && activeItemClassName ? ' ' + activeItemClassName : '') },
+            react_1.default.createElement("a", { className: pageLinkClassName, href: "#", onClick: (0, dom_1.preventDefault)(function () { return handlePageChange(item.gotoPage); }), "aria-label": item.a11yLabel }, getLabel(item.label, item.a11yLabel)))) : (
         // item = NonClickableItem
-        react_1.default.createElement("li", { key: item.key, className: "page-item disabled", "aria-hidden": item.a11yHidden },
-            react_1.default.createElement("span", { className: "page-link" }, getLabel(item.label, item.a11yLabel))));
+        react_1.default.createElement("li", { key: item.key, className: "".concat(pageItemClassName, " ").concat(disabledItemClassName), "aria-hidden": item.a11yHidden },
+            react_1.default.createElement("span", { className: pageLinkClassName }, getLabel(item.label, item.a11yLabel))));
     })));
@@ -63,10 +86,12 @@ }
     maxWidth: prop_types_1.default.number,
+    className: prop_types_1.default.string,
     extraClassName: prop_types_1.default.string,
+    pageItemClassName: prop_types_1.default.string,
+    pageLinkClassName: prop_types_1.default.string,
+    activeItemClassName: prop_types_1.default.string,
+    disabledItemClassName: prop_types_1.default.string,
+    disabledLinkClassName: prop_types_1.default.string,
+    srOnlyClassName: prop_types_1.default.string,
     previousLabel: prop_types_1.default.string,
     nextLabel: prop_types_1.default.string,
 };
-function getLabel(label, a11yLabel) {
-    return a11yLabel ? (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("span", { "aria-hidden": "true" }, label),
-        react_1.default.createElement("span", { className: "sr-only" }, a11yLabel))) : (label);
-}

lib/hooks/usePaginationItems.d.ts

@@ -7,2 +7,3 @@ export declare function usePaginationItems(inputCurrent: number, inputTotal: number, maxWidth: number | undefined, options?: {
     ref: (element: HTMLElement | null) => void;
+    clearCache: () => void;
 };

lib/hooks/usePaginationItems.js

@@ -37,3 +37,3 @@ var __assign = (this && this.__assign) || function () {
     });
-    return { items: amendedItems, ref: ref };
+    return { items: amendedItems, ref: ref, clearCache: clearCache };
 }

lib/index.d.ts

@@ -5,3 +5,3 @@ import React from 'react';
 export default _default;
-declare function BootstrapPagination({ current, total, onPageChange: handlePageChange, maxWidth, extraClassName, previousLabel, nextLabel, }: BootstrapPaginationProps): JSX.Element | null;
+declare function BootstrapPagination({ current, total, onPageChange: handlePageChange, maxWidth, className, extraClassName, pageItemClassName, pageLinkClassName, activeItemClassName, disabledItemClassName, srOnlyClassName, previousLabel, nextLabel, }: BootstrapPaginationProps): JSX.Element | null;
 declare namespace BootstrapPagination {
@@ -13,3 +13,10 @@ var propTypes: {
         maxWidth: PropTypes.Requireable<number>;
+        className: PropTypes.Requireable<string>;
         extraClassName: PropTypes.Requireable<string>;
+        pageItemClassName: PropTypes.Requireable<string>;
+        pageLinkClassName: PropTypes.Requireable<string>;
+        activeItemClassName: PropTypes.Requireable<string>;
+        disabledItemClassName: PropTypes.Requireable<string>;
+        disabledLinkClassName: PropTypes.Requireable<string>;
+        srOnlyClassName: PropTypes.Requireable<string>;
         previousLabel: PropTypes.Requireable<string>;
@@ -24,5 +31,12 @@ nextLabel: PropTypes.Requireable<string>;
     maxWidth?: number;
+    className?: string;
     extraClassName?: string;
+    pageItemClassName?: string;
+    pageLinkClassName?: string;
+    activeItemClassName?: string;
+    disabledItemClassName?: string;
+    disabledLinkClassName?: string;
+    srOnlyClassName?: string;
     previousLabel?: string;
     nextLabel?: string;
 };

lib/index.js

@@ -1,2 +0,2 @@
-import React, { memo } from 'react';
+import React, { memo, useEffect } from 'react';
 import PropTypes from 'prop-types';
@@ -8,21 +8,44 @@ import { usePaginationItems } from './hooks/usePaginationItems';
 function BootstrapPagination(_a) {
-    var current = _a.current, total = _a.total, handlePageChange = _a.onPageChange, maxWidth = _a.maxWidth, _b = _a.extraClassName, extraClassName = _b === void 0 ? 'justify-content-center' : _b, previousLabel = _a.previousLabel, nextLabel = _a.nextLabel;
-    var _c = usePaginationItems(current, total, maxWidth, {
+    var current = _a.current, total = _a.total, handlePageChange = _a.onPageChange, maxWidth = _a.maxWidth, className = _a.className, _b = _a.extraClassName, extraClassName = _b === void 0 ? 'justify-content-center' : _b, _c = _a.pageItemClassName, pageItemClassName = _c === void 0 ? 'page-item' : _c, _d = _a.pageLinkClassName, pageLinkClassName = _d === void 0 ? 'page-link' : _d, _e = _a.activeItemClassName, activeItemClassName = _e === void 0 ? 'active' : _e, _f = _a.disabledItemClassName, disabledItemClassName = _f === void 0 ? 'disabled' : _f, _g = _a.srOnlyClassName, srOnlyClassName = _g === void 0 ? 'sr-only' : _g, previousLabel = _a.previousLabel, nextLabel = _a.nextLabel;
+    var _h = usePaginationItems(current, total, maxWidth, {
         previousLabel: previousLabel,
         nextLabel: nextLabel,
-    }), items = _c.items, ref = _c.ref;
+    }), items = _h.items, ref = _h.ref, clearCache = _h.clearCache;
+    useEffect(function () {
+        return function () { return clearCache(); };
+    }, [
+        clearCache,
+        className,
+        pageItemClassName,
+        pageLinkClassName,
+        activeItemClassName,
+        disabledItemClassName,
+        srOnlyClassName,
+    ]);
     if (items.length === 0)
         return null;
-    var className = 'pagination';
-    if (extraClassName) {
-        className += ' ' + extraClassName;
+    function getContainerClassName() {
+        if (className !== undefined) {
+            return className;
+        }
+        else if (extraClassName) {
+            return "pagination ".concat(extraClassName);
+        }
+        else {
+            return 'pagination';
+        }
     }
-    return (React.createElement("ul", { className: className, ref: ref }, items.map(function (item) {
+    function getLabel(label, a11yLabel) {
+        return a11yLabel ? (React.createElement(React.Fragment, null,
+            React.createElement("span", { "aria-hidden": "true" }, label),
+            React.createElement("span", { className: srOnlyClassName }, a11yLabel))) : (label);
+    }
+    return (React.createElement("ul", { className: getContainerClassName(), ref: ref }, items.map(function (item) {
         return item.gotoPage !== undefined ? (
         // item = ClickableItem
-        React.createElement("li", { key: item.key, className: "page-item".concat(item.active ? ' active' : '') },
-            React.createElement("a", { className: "page-link", href: "#", onClick: preventDefault(function () { return handlePageChange(item.gotoPage); }), "aria-label": item.a11yLabel }, getLabel(item.label, item.a11yLabel)))) : (
+        React.createElement("li", { key: item.key, className: "".concat(pageItemClassName).concat(item.active && activeItemClassName ? ' ' + activeItemClassName : '') },
+            React.createElement("a", { className: pageLinkClassName, href: "#", onClick: preventDefault(function () { return handlePageChange(item.gotoPage); }), "aria-label": item.a11yLabel }, getLabel(item.label, item.a11yLabel)))) : (
         // item = NonClickableItem
-        React.createElement("li", { key: item.key, className: "page-item disabled", "aria-hidden": item.a11yHidden },
-            React.createElement("span", { className: "page-link" }, getLabel(item.label, item.a11yLabel))));
+        React.createElement("li", { key: item.key, className: "".concat(pageItemClassName, " ").concat(disabledItemClassName), "aria-hidden": item.a11yHidden },
+            React.createElement("span", { className: pageLinkClassName }, getLabel(item.label, item.a11yLabel))));
     })));
@@ -35,10 +58,12 @@ }
     maxWidth: PropTypes.number,
+    className: PropTypes.string,
     extraClassName: PropTypes.string,
+    pageItemClassName: PropTypes.string,
+    pageLinkClassName: PropTypes.string,
+    activeItemClassName: PropTypes.string,
+    disabledItemClassName: PropTypes.string,
+    disabledLinkClassName: PropTypes.string,
+    srOnlyClassName: PropTypes.string,
     previousLabel: PropTypes.string,
     nextLabel: PropTypes.string,
 };
-function getLabel(label, a11yLabel) {
-    return a11yLabel ? (React.createElement(React.Fragment, null,
-        React.createElement("span", { "aria-hidden": "true" }, label),
-        React.createElement("span", { className: "sr-only" }, a11yLabel))) : (label);
-}

package.json

 {
   "name": "react-responsive-pagination",
-  "version": "1.4.1",
+  "version": "1.5.0-beta.1",
   "description": "React component for responsive pagination",
@@ -49,8 +49,8 @@ "author": "jonelantha",
     "@types/prop-types": "^15.7.5",
-    "@types/react": "^18.0.8",
-    "@types/react-dom": "^18.0.3",
-    "@typescript-eslint/eslint-plugin": "^5.21.0",
-    "@typescript-eslint/parser": "^5.21.0",
+    "@types/react": "^18.0.12",
+    "@types/react-dom": "^18.0.5",
+    "@typescript-eslint/eslint-plugin": "^5.27.1",
+    "@typescript-eslint/parser": "^5.27.1",
     "babel-eslint": "^10.1.0",
-    "eslint": "^8.14.0",
+    "eslint": "^8.17.0",
     "eslint-config-react-app": "^7.0.1",
@@ -60,3 +60,3 @@ "eslint-plugin-flowtype": "^8.0.3",
     "eslint-plugin-jsx-a11y": "^6.5.1",
-    "eslint-plugin-react": "^7.29.4",
+    "eslint-plugin-react": "^7.30.0",
     "eslint-plugin-react-hooks": "^4.5.0",
@@ -66,5 +66,5 @@ "react": "^18.1.0",
     "rimraf": "^3.0.2",
-    "semantic-release": "^19.0.2",
-    "typescript": "^4.6.4"
+    "semantic-release": "^19.0.3",
+    "typescript": "^4.7.3"
   }
 }

README.md

@@ -14,6 +14,6 @@ # React Responsive Pagination
 
+### ⚡️ [LIVE DEMO - try it out for yourself!](https://react-responsive-pagination.elantha.com/live-demo/) ⚡️
+
 <a href="https://react-responsive-pagination.elantha.com/"><img src="./react-responsive-pagination.gif?raw=true" width="985" alt="react-responsive-pagination example" /></a>
 
-### ⚡️ [LIVE DEMO - try it out for yourself!](https://react-responsive-pagination.elantha.com/live-demo/) ⚡️
-
 ### 📕 Visit [https://react-responsive-pagination.elantha.com](https://react-responsive-pagination.elantha.com) to get started 🚀
@@ -62,11 +62,32 @@
 
-| Prop name                | Type                      | Description                                                                                                                                                                                                                                 |
-| ------------------------ | ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| current                  | number                    | The current active page. Indexed from 1                                                                                                                                                                                                     |
-| total                    | number                    | The total number of pages                                                                                                                                                                                                                   |
-| onPageChange             | (newPage: number) => void | A callback handler which is called when the user clicks a new page, note that the active page will not change unless the `current` prop is updated to reflect the new page (as in the example above). The `newPage` value is indexed from 1 |
-| maxWidth (optional)      | number                    | (optional) The maximum width (in pixels) of the pagination component. Specify a value if you want to override the automatic sizing. Note this width may be exceeded in the case where it's not possible to output a small enough component  |
-| previousLabel (optional) | string                    | (optional) The label for the previous button, default value is `«`                                                                                                                                                                          |
-| nextLabel (optional)     | string                    | (optional) The label for the next button, default value is `»`                                                                                                                                                                              |
+### Common Props
 
+| Prop                                                              | Description                                                                                                                                                                                                                                 |
+| ----------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **current**<br />`number`<br />(required)                         | The current active page. Indexed from 1                                                                                                                                                                                                     |
+| **total**<br />`number`<br />(required)                           | The total number of pages                                                                                                                                                                                                                   |
+| **onPageChange**<br />`(newPage: number) => void`<br />(required) | A callback handler which is called when the user clicks a new page, note that the active page will not change unless the `current` prop is updated to reflect the new page (as in the example above). The `newPage` value is indexed from 1 |
+| **maxWidth**<br />`number`<br />(optional)                        | The maximum width (in pixels) of the pagination component. Specify a value if you want to override the automatic sizing. Note this width may be exceeded in the case where it's not possible to output a small enough component             |
+
+### ClassName Props
+
+See [Overriding default classNames](https://react-responsive-pagination.elantha.com/custom-styled-pagination/#overriding-default-classnames) for more information
+
+| Prop                                                    | Description                                                                                                                                                                                                                                                                                                                                     |
+| ------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **className**<br />`string`<br />(optional)             | Class name for the top level **<ul\>** container<br />Defaults to `pagination`, overrides **extraClassName** prop (below)                                                                                                                                                                                                                       |
+| **extraClassName**<br />`string`<br />(optional)        | Useful when using Bootstrap styles, extra classNames to be added to the top level **<ul\>** container. Use this prop to override the default justify value - for example to align elements to the start of the page use: `justify-content-start`<br />Defaults to `justify-content-center`, not applicable if **className** prop (above) is set |
+| **pageItemClassName**<br />`string`<br />(optional)     | Class name for all the **<li\>** elements<br />Defaults to `page-item`                                                                                                                                                                                                                                                                          |
+| **pageLinkClassName**<br />`string`<br />(optional)     | Class name for **<a\>** or **<span\>** child elements within an **<li\>** element: <br />`<li ...><a class='page-link'>1</a></li>`<br />Defaults to `page-link`                                                                                                                                                                                 |
+| **activeItemClassName**<br />`string`<br />(optional)   | Appended to **<li\>** class name for the active element:<br />`<li class='page-item active'><a class='page-link'>1</a></li>`<br />Defaults to `active`                                                                                                                                                                                          |
+| **disabledItemClassName**<br />`string`<br />(optional) | Appended to **<li\>** class name for non-clickable elements (disabled nav buttons and the break/ellipsis):<br />`<li class='page-item disabled'><span class='page-link'>...</span></li>`<br />Defaults to `disabled`                                                                                                                            |
+| **srOnlyClassName**<br />`string`<br />(optional)       | Class for screen reader only content (which should be visually hidden) - see [an example of typical css](https://react-responsive-pagination.elantha.com/custom-styled-pagination/#screen-reader-only-sr-only-styles) for this purpose<br />Defaults to `sr-only`                                                                               |
+
+### Label Props
+
+| Prop                                            | Description                                        |
+| ----------------------------------------------- | -------------------------------------------------- |
+| **previousLabel**<br />`string`<br />(optional) | The label for the previous button, defaults to `«` |
+| **nextLabel**<br />`string`<br />(optional)     | The label for the next button, defaults to `»`     |
+
 See [Props Reference](https://react-responsive-pagination.elantha.com/props) for the full list
@@ -73,0 +94,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

136986

increased by6.66%

Lines of code

2833

increased by3.13%

Number of lines in readme file

96

increased by28%

Worsened metrics

Number of low quality alerts

1

increased byInfinity%

No dependency changes