Closes #321. Add className prop to wrap with styled-components & all

AdeleD · Oct 26, 2021 · 6e3706f · 6e3706f
1 parent f42f49c
commit 6e3706f
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,7 @@
 ## To be released
 
 - A new prop `renderOnZeroPageCount` has been added. It allows to define what to display when `pageCount` is zero. By default, it lets the main pagination boxes be displayed (Previous / Next). To display nothing, just provides `renderOnZeroPageCount={null}`. (see: https://github.com/AdeleD/react-paginate/pull/377)
+- A new prop `className` has been added, which is an alias to `containerClassName` and is usefull for integration with CSS-in-JS frameworks like styled-components. (see: https://github.com/AdeleD/react-paginate/issues/321)
 
 ## >= 7.1.3
 

diff --git a/README.md b/README.md
@@ -117,6 +117,7 @@ You can also check this **[CodePen demo](https://codepen.io/monsieurv/pen/yLoMxY
 | `forcePage`              | `Number`   | To override selected page with parent prop. Use this if you want to control the page from your app state.                                                       |
 | `disableInitialCallback` | `boolean`  | Disable `onPageChange` callback with initial page. Default: `false`                                                                                             |
 | `containerClassName`     | `String`   | The classname of the pagination container.                                                                                                                      |
+| `className`              | `String`   | Same as `containerClassName`. For use with [styled-components](https://styled-components.com/) & other CSS-in-JS.                                               |
 | `pageClassName`          | `String`   | The classname on tag `li` of each page element.                                                                                                                 |
 | `pageLinkClassName`      | `String`   | The classname on tag `a` of each page element.                                                                                                                  |
 | `pageLabelBuilder`       | `Function` | Function to set the text on page links. Defaults to `(page) => page`                                                                                            |

diff --git a/__tests__/PaginationBoxView-test.js b/__tests__/PaginationBoxView-test.js
@@ -935,7 +935,28 @@ describe('Test custom props', () => {
   describe('containerClassName', () => {
     it('should use the containerClassName prop when defined', () => {
       const pagination = ReactTestUtils.renderIntoDocument(
-        <PaginationBoxView containerClassName={'my-pagination'} />
+        <PaginationBoxView containerClassName="my-pagination" />
+      );
+      expect(ReactDOM.findDOMNode(pagination).className).toEqual(
+        'my-pagination'
+      );
+    });
+
+    it('should use the className prop when defined', () => {
+      const pagination = ReactTestUtils.renderIntoDocument(
+        <PaginationBoxView className="my-pagination" />
+      );
+      expect(ReactDOM.findDOMNode(pagination).className).toEqual(
+        'my-pagination'
+      );
+    });
+
+    it('should use the className prop in priority from containerClassName', () => {
+      const pagination = ReactTestUtils.renderIntoDocument(
+        <PaginationBoxView
+          className="my-pagination"
+          containerClassName="another"
+        />
       );
       expect(ReactDOM.findDOMNode(pagination).className).toEqual(
         'my-pagination'

diff --git a/react_components/PaginationBoxView.js b/react_components/PaginationBoxView.js
@@ -24,6 +24,7 @@ export default class PaginationBoxView extends Component {
     forcePage: PropTypes.number,
     disableInitialCallback: PropTypes.bool,
     containerClassName: PropTypes.string,
+    className: PropTypes.string,
     pageClassName: PropTypes.string,
     pageLinkClassName: PropTypes.string,
     pageLabelBuilder: PropTypes.func,
@@ -346,6 +347,7 @@ export default class PaginationBoxView extends Component {
     const {
       disabledClassName,
       pageCount,
+      className,
       containerClassName,
       previousLabel,
       previousClassName,
@@ -371,7 +373,7 @@ export default class PaginationBoxView extends Component {
     const nextAriaDisabled = selected === pageCount - 1 ? 'true' : 'false';
 
     return (
-      <ul className={containerClassName}>
+      <ul className={className || containerClassName}>
         <li className={previousClasses}>
           <a
             className={previousLinkClassName}