react-paginate - npm Package Compare versions

Comparing version 6.0.0 to 6.1.0

__tests__/PaginationBoxView-test.js

@@ -14,15 +14,24 @@ import React from 'react';
   it('should render a pagination component', () => {
-    const pagination = ReactTestUtils.renderIntoDocument(
-      <PaginationBoxView />
-    );
+    const pagination = ReactTestUtils.renderIntoDocument(<PaginationBoxView />);
 
-    expect(ReactDOM.findDOMNode(pagination).nodeName).toEqual("UL");
+    expect(ReactDOM.findDOMNode(pagination).nodeName).toEqual('UL');
 
-    ReactTestUtils.scryRenderedComponentsWithType(pagination, PaginationBoxView);
+    ReactTestUtils.scryRenderedComponentsWithType(
+      pagination,
+      PaginationBoxView
+    );
 
-    expect(ReactDOM.findDOMNode(pagination).querySelector("li:first-child a").textContent).toBe("Previous");
-    expect(ReactDOM.findDOMNode(pagination).querySelector(".selected a").textContent).toBe("1");
-    expect(ReactDOM.findDOMNode(pagination).querySelector("li:last-child a").textContent).toBe("Next");
+    expect(
+      ReactDOM.findDOMNode(pagination).querySelector('li:first-child a')
+        .textContent
+    ).toBe('Previous');
+    expect(
+      ReactDOM.findDOMNode(pagination).querySelector('.selected a').textContent
+    ).toBe('1');
+    expect(
+      ReactDOM.findDOMNode(pagination).querySelector('li:last-child a')
+        .textContent
+    ).toBe('Next');
 
-    const pages = ReactDOM.findDOMNode(pagination).querySelectorAll("li");
+    const pages = ReactDOM.findDOMNode(pagination).querySelectorAll('li');
     // 3 * 2 margins + 1 break label + previous & next buttons == 9:
@@ -38,6 +47,7 @@ expect(pages.length).toEqual(9);
         marginPagesDisplayed={0}
-        breakLabel={null} />
+        breakLabel={null}
+      />
     );
 
-    const pageItems = ReactDOM.findDOMNode(pagination).querySelectorAll("li");
+    const pageItems = ReactDOM.findDOMNode(pagination).querySelectorAll('li');
     // Prev, selected page, next
@@ -50,7 +60,8 @@ expect(pageItems.length).toBe(3);
   it('test clicks on previous and next buttons', () => {
-    const pagination = ReactTestUtils.renderIntoDocument(
-      <PaginationBoxView />
+    const pagination = ReactTestUtils.renderIntoDocument(<PaginationBoxView />);
+
+    let elmts = ReactTestUtils.scryRenderedDOMComponentsWithTag(
+      pagination,
+      'a'
     );
-
-    let elmts = ReactTestUtils.scryRenderedDOMComponentsWithTag(pagination, 'a');
     let previous = elmts[0];
@@ -61,21 +72,27 @@ let next = elmts[elmts.length - 1];
 
-    expect(ReactDOM.findDOMNode(pagination).querySelector(".selected a").textContent).toBe("2");
+    expect(
+      ReactDOM.findDOMNode(pagination).querySelector('.selected a').textContent
+    ).toBe('2');
 
     ReactTestUtils.Simulate.click(previous);
 
-    expect(ReactDOM.findDOMNode(pagination).querySelector(".selected a").textContent).toBe("1");
+    expect(
+      ReactDOM.findDOMNode(pagination).querySelector('.selected a').textContent
+    ).toBe('1');
   });
 
   it('test click on a page item', () => {
-    const pagination = ReactTestUtils.renderIntoDocument(
-      <PaginationBoxView />
-    );
+    const pagination = ReactTestUtils.renderIntoDocument(<PaginationBoxView />);
 
     ReactTestUtils.findRenderedComponentWithType(pagination, PaginationBoxView);
 
-    const pageItem = ReactDOM.findDOMNode(pagination).querySelector("li:nth-child(3) a");
+    const pageItem = ReactDOM.findDOMNode(pagination).querySelector(
+      'li:nth-child(3) a'
+    );
 
     ReactTestUtils.Simulate.click(pageItem);
 
-    expect(ReactDOM.findDOMNode(pagination).querySelector(".selected a").textContent).toBe("2");
+    expect(
+      ReactDOM.findDOMNode(pagination).querySelector('.selected a').textContent
+    ).toBe('2');
   });
@@ -89,14 +106,23 @@
         marginPagesDisplayed={2}
-        pageRangeDisplayed={5} />
+        pageRangeDisplayed={5}
+      />
     );
 
     // The selected page is before the left break
-    const leftBreakView1 = ReactDOM.findDOMNode(pagination).querySelector(".break a");
+    const leftBreakView1 = ReactDOM.findDOMNode(pagination).querySelector(
+      '.break a'
+    );
     ReactTestUtils.Simulate.click(leftBreakView1);
-    expect(ReactDOM.findDOMNode(pagination).querySelector(".selected a").textContent).toBe("6");
+    expect(
+      ReactDOM.findDOMNode(pagination).querySelector('.selected a').textContent
+    ).toBe('6');
 
     // The selected page is after the left break
-    const leftBreakView2 = ReactDOM.findDOMNode(pagination).querySelectorAll(".break a")[0];
+    const leftBreakView2 = ReactDOM.findDOMNode(pagination).querySelectorAll(
+      '.break a'
+    )[0];
     ReactTestUtils.Simulate.click(leftBreakView2);
-    expect(ReactDOM.findDOMNode(pagination).querySelector(".selected a").textContent).toBe("1");
+    expect(
+      ReactDOM.findDOMNode(pagination).querySelector('.selected a').textContent
+    ).toBe('1');
   });
@@ -110,14 +136,23 @@
         marginPagesDisplayed={2}
-        pageRangeDisplayed={5} />
+        pageRangeDisplayed={5}
+      />
     );
 
     // The selected page is before the right break
-    const rightBreak1 = ReactDOM.findDOMNode(pagination).querySelectorAll(".break a")[1];
+    const rightBreak1 = ReactDOM.findDOMNode(pagination).querySelectorAll(
+      '.break a'
+    )[1];
     ReactTestUtils.Simulate.click(rightBreak1);
-    expect(ReactDOM.findDOMNode(pagination).querySelector(".selected a").textContent).toBe("16");
+    expect(
+      ReactDOM.findDOMNode(pagination).querySelector('.selected a').textContent
+    ).toBe('16');
 
     // The selected page is after the right break
-    const rightBreak2 = ReactDOM.findDOMNode(pagination).querySelector(".break a");
+    const rightBreak2 = ReactDOM.findDOMNode(pagination).querySelector(
+      '.break a'
+    );
     ReactTestUtils.Simulate.click(rightBreak2);
-    expect(ReactDOM.findDOMNode(pagination).querySelector(".selected a").textContent).toBe("11");
+    expect(
+      ReactDOM.findDOMNode(pagination).querySelector('.selected a').textContent
+    ).toBe('11');
   });
@@ -129,3 +164,3 @@ });
     const pagination = ReactTestUtils.renderIntoDocument(
-      <PaginationBoxView 
+      <PaginationBoxView
         initialPage={0}
@@ -138,4 +173,8 @@ pageCount={20}
 
-    const previousElement = ReactDOM.findDOMNode(pagination).querySelector("li:first-child");
-    const nextElement = ReactDOM.findDOMNode(pagination).querySelector("li:last-child");
+    const previousElement = ReactDOM.findDOMNode(pagination).querySelector(
+      'li:first-child'
+    );
+    const nextElement = ReactDOM.findDOMNode(pagination).querySelector(
+      'li:last-child'
+    );
 
@@ -147,7 +186,12 @@ let leftElements = [];
 
-    const elements = ReactDOM.findDOMNode(pagination).querySelectorAll("li:not(.previous):not(.next)");
+    const elements = ReactDOM.findDOMNode(pagination).querySelectorAll(
+      'li:not(.previous):not(.next)'
+    );
     elements.forEach(element => {
       if (breakElementReached === false && element.className !== 'break') {
         leftElements.push(element);
-      } else if (breakElementReached === true && element.className !== 'break') {
+      } else if (
+        breakElementReached === true &&
+        element.className !== 'break'
+      ) {
         rightElements.push(element);
@@ -169,3 +213,3 @@ } else {
     const pagination = ReactTestUtils.renderIntoDocument(
-      <PaginationBoxView 
+      <PaginationBoxView
         initialPage={4}
@@ -178,4 +222,8 @@ pageCount={20}
 
-    const previousElement = ReactDOM.findDOMNode(pagination).querySelector("li:first-child");
-    const nextElement = ReactDOM.findDOMNode(pagination).querySelector("li:last-child");
+    const previousElement = ReactDOM.findDOMNode(pagination).querySelector(
+      'li:first-child'
+    );
+    const nextElement = ReactDOM.findDOMNode(pagination).querySelector(
+      'li:last-child'
+    );
 
@@ -187,7 +235,12 @@ let leftElements = [];
 
-    const elements = ReactDOM.findDOMNode(pagination).querySelectorAll("li:not(.previous):not(.next)");
+    const elements = ReactDOM.findDOMNode(pagination).querySelectorAll(
+      'li:not(.previous):not(.next)'
+    );
     elements.forEach(element => {
       if (breakElementReached === false && element.className !== 'break') {
         leftElements.push(element);
-      } else if (breakElementReached === true && element.className !== 'break') {
+      } else if (
+        breakElementReached === true &&
+        element.className !== 'break'
+      ) {
         rightElements.push(element);
@@ -209,3 +262,3 @@ } else {
     const pagination = ReactTestUtils.renderIntoDocument(
-      <PaginationBoxView 
+      <PaginationBoxView
         initialPage={5}
@@ -218,4 +271,8 @@ pageCount={20}
 
-    const previousElement = ReactDOM.findDOMNode(pagination).querySelector("li:first-child");
-    const nextElement = ReactDOM.findDOMNode(pagination).querySelector("li:last-child");
+    const previousElement = ReactDOM.findDOMNode(pagination).querySelector(
+      'li:first-child'
+    );
+    const nextElement = ReactDOM.findDOMNode(pagination).querySelector(
+      'li:last-child'
+    );
 
@@ -229,30 +286,28 @@ let leftElements = [];
 
-    const elements = ReactDOM.findDOMNode(pagination).querySelectorAll("li:not(.previous):not(.next)");
+    const elements = ReactDOM.findDOMNode(pagination).querySelectorAll(
+      'li:not(.previous):not(.next)'
+    );
     elements.forEach(element => {
       if (
-        leftBreakElementReached === false && 
-        rightBreakElementReached === false && 
+        leftBreakElementReached === false &&
+        rightBreakElementReached === false &&
         element.className !== 'break'
       ) {
         leftElements.push(element);
-      } 
-      else if (
-        leftBreakElementReached === true && 
-        rightBreakElementReached === false && 
+      } else if (
+        leftBreakElementReached === true &&
+        rightBreakElementReached === false &&
         element.className !== 'break'
       ) {
         middleElements.push(element);
-      } 
-      else if (
-        leftBreakElementReached === true && 
-        rightBreakElementReached === true && 
+      } else if (
+        leftBreakElementReached === true &&
+        rightBreakElementReached === true &&
         element.className !== 'break'
       ) {
         rightElements.push(element);
-      } 
-      else if (breakElements.length === 0 && element.className === 'break') {
+      } else if (breakElements.length === 0 && element.className === 'break') {
         breakElements.push(element);
         leftBreakElementReached = true;
-      } 
-      else if (breakElements.length === 1 && element.className === 'break') {
+      } else if (breakElements.length === 1 && element.className === 'break') {
         breakElements.push(element);
@@ -273,3 +328,3 @@ rightBreakElementReached = true;
     const pagination = ReactTestUtils.renderIntoDocument(
-      <PaginationBoxView 
+      <PaginationBoxView
         initialPage={15}
@@ -282,4 +337,8 @@ pageCount={20}
 
-    const previousElement = ReactDOM.findDOMNode(pagination).querySelector("li:first-child");
-    const nextElement = ReactDOM.findDOMNode(pagination).querySelector("li:last-child");
+    const previousElement = ReactDOM.findDOMNode(pagination).querySelector(
+      'li:first-child'
+    );
+    const nextElement = ReactDOM.findDOMNode(pagination).querySelector(
+      'li:last-child'
+    );
 
@@ -291,7 +350,12 @@ let leftElements = [];
 
-    const elements = ReactDOM.findDOMNode(pagination).querySelectorAll("li:not(.previous):not(.next)");
+    const elements = ReactDOM.findDOMNode(pagination).querySelectorAll(
+      'li:not(.previous):not(.next)'
+    );
     elements.forEach(element => {
       if (breakElementReached === false && element.className !== 'break') {
         leftElements.push(element);
-      } else if (breakElementReached === true && element.className !== 'break') {
+      } else if (
+        breakElementReached === true &&
+        element.className !== 'break'
+      ) {
         rightElements.push(element);
@@ -313,3 +377,3 @@ } else {
     const pagination = ReactTestUtils.renderIntoDocument(
-      <PaginationBoxView 
+      <PaginationBoxView
         initialPage={16}
@@ -322,4 +386,8 @@ pageCount={20}
 
-    const previousElement = ReactDOM.findDOMNode(pagination).querySelector("li:first-child");
-    const nextElement = ReactDOM.findDOMNode(pagination).querySelector("li:last-child");
+    const previousElement = ReactDOM.findDOMNode(pagination).querySelector(
+      'li:first-child'
+    );
+    const nextElement = ReactDOM.findDOMNode(pagination).querySelector(
+      'li:last-child'
+    );
 
@@ -331,7 +399,12 @@ let leftElements = [];
 
-    const elements = ReactDOM.findDOMNode(pagination).querySelectorAll("li:not(.previous):not(.next)");
+    const elements = ReactDOM.findDOMNode(pagination).querySelectorAll(
+      'li:not(.previous):not(.next)'
+    );
     elements.forEach(element => {
       if (breakElementReached === false && element.className !== 'break') {
         leftElements.push(element);
-      } else if (breakElementReached === true && element.className !== 'break') {
+      } else if (
+        breakElementReached === true &&
+        element.className !== 'break'
+      ) {
         rightElements.push(element);
@@ -358,4 +431,10 @@ } else {
       );
-      expect(ReactDOM.findDOMNode(pagination).querySelector("li:first-child a").textContent).toBe("Previous");
-      expect(ReactDOM.findDOMNode(pagination).querySelector("li:last-child a").textContent).toBe("Next");
+      expect(
+        ReactDOM.findDOMNode(pagination).querySelector('li:first-child a')
+          .textContent
+      ).toBe('Previous');
+      expect(
+        ReactDOM.findDOMNode(pagination).querySelector('li:last-child a')
+          .textContent
+      ).toBe('Next');
     });
@@ -369,4 +448,8 @@ });
       );
-      expect(ReactDOM.findDOMNode(pagination).querySelector("li.break").textContent).toBe("...");
-      expect(ReactDOM.findDOMNode(pagination).querySelector(".break")).not.toBe(null);
+      expect(
+        ReactDOM.findDOMNode(pagination).querySelector('li.break').textContent
+      ).toBe('...');
+      expect(ReactDOM.findDOMNode(pagination).querySelector('.break')).not.toBe(
+        null
+      );
     });
@@ -380,6 +463,11 @@ });
       );
-      const nextItem = ReactDOM.findDOMNode(pagination).querySelector("li:last-child a");
+      const nextItem = ReactDOM.findDOMNode(pagination).querySelector(
+        'li:last-child a'
+      );
       ReactTestUtils.Simulate.click(nextItem);
 
-      expect(ReactDOM.findDOMNode(pagination).querySelector(".selected a").textContent).toBe("2");
+      expect(
+        ReactDOM.findDOMNode(pagination).querySelector('.selected a')
+          .textContent
+      ).toBe('2');
     });
@@ -393,3 +481,6 @@ });
       );
-      expect(ReactDOM.findDOMNode(pagination).querySelector(".selected a").textContent).toBe("1");
+      expect(
+        ReactDOM.findDOMNode(pagination).querySelector('.selected a')
+          .textContent
+      ).toBe('1');
     });
@@ -402,5 +493,5 @@ });
       ReactTestUtils.renderIntoDocument(
-        <PaginationBoxView 
+        <PaginationBoxView
           initialPage={5}
-          onPageChange={myOnPageChangeMethod} 
+          onPageChange={myOnPageChangeMethod}
         />
@@ -417,3 +508,3 @@ );
       );
-      expect(ReactDOM.findDOMNode(pagination).className).toEqual("");
+      expect(ReactDOM.findDOMNode(pagination).className).toEqual('');
     });
@@ -425,13 +516,19 @@ });
       const pagination = ReactTestUtils.renderIntoDocument(
-        <PaginationBoxView 
-          previousClassName="prev"
-          nextClassName="next"
-        />
+        <PaginationBoxView previousClassName="prev" nextClassName="next" />
       );
 
-      const pageItem = ReactDOM.findDOMNode(pagination).querySelector("li:nth-child(3) a");
+      const pageItem = ReactDOM.findDOMNode(pagination).querySelector(
+        'li:nth-child(3) a'
+      );
       ReactTestUtils.Simulate.click(pageItem);
 
-      expect(ReactDOM.findDOMNode(pagination).querySelector("li:not(.selected):not(.prev):not(.next)").className).toBe("");
-      expect(ReactDOM.findDOMNode(pagination).querySelector("li:nth-child(3)").className).toBe("selected");
+      expect(
+        ReactDOM.findDOMNode(pagination).querySelector(
+          'li:not(.selected):not(.prev):not(.next)'
+        ).className
+      ).toBe('');
+      expect(
+        ReactDOM.findDOMNode(pagination).querySelector('li:nth-child(3)')
+          .className
+      ).toBe('selected');
     });
@@ -443,9 +540,12 @@ });
       const pagination = ReactTestUtils.renderIntoDocument(
-        <PaginationBoxView
-          previousClassName="prev"
-          nextClassName="next"
-        />
+        <PaginationBoxView previousClassName="prev" nextClassName="next" />
       );
-      expect(ReactDOM.findDOMNode(pagination).querySelector("li:not(.selected):not(.prev):not(.next) a").className).toBe("");
-      expect(ReactDOM.findDOMNode(pagination).querySelector(".selected a").className).toBe("");
+      expect(
+        ReactDOM.findDOMNode(pagination).querySelector(
+          'li:not(.selected):not(.prev):not(.next) a'
+        ).className
+      ).toBe('');
+      expect(
+        ReactDOM.findDOMNode(pagination).querySelector('.selected a').className
+      ).toBe('');
     });
@@ -457,8 +557,12 @@ });
       const pagination = ReactTestUtils.renderIntoDocument(
-        <PaginationBoxView 
-          initialPage={2}
-        />
+        <PaginationBoxView initialPage={2} />
       );
-      expect(ReactDOM.findDOMNode(pagination).querySelector("li:first-child").className).toBe("previous");
-      expect(ReactDOM.findDOMNode(pagination).querySelector("li:last-child").className).toBe("next");
+      expect(
+        ReactDOM.findDOMNode(pagination).querySelector('li:first-child')
+          .className
+      ).toBe('previous');
+      expect(
+        ReactDOM.findDOMNode(pagination).querySelector('li:last-child')
+          .className
+      ).toBe('next');
     });
@@ -470,8 +574,12 @@ });
       const pagination = ReactTestUtils.renderIntoDocument(
-        <PaginationBoxView 
-          initialPage={2}
-        />
+        <PaginationBoxView initialPage={2} />
       );
-      expect(ReactDOM.findDOMNode(pagination).querySelector("li:first-child a").className).toBe("");
-      expect(ReactDOM.findDOMNode(pagination).querySelector("li:last-child a").className).toBe("");
+      expect(
+        ReactDOM.findDOMNode(pagination).querySelector('li:first-child a')
+          .className
+      ).toBe('');
+      expect(
+        ReactDOM.findDOMNode(pagination).querySelector('li:last-child a')
+          .className
+      ).toBe('');
     });
@@ -483,9 +591,12 @@ });
       const pagination = ReactTestUtils.renderIntoDocument(
-        <PaginationBoxView
-          initialPage={0}
-          pageCount={1}
-        />
+        <PaginationBoxView initialPage={0} pageCount={1} />
       );
-      expect(ReactDOM.findDOMNode(pagination).querySelector("li:first-child").className).toBe("previous disabled");
-      expect(ReactDOM.findDOMNode(pagination).querySelector("li:last-child").className).toBe("next disabled");
+      expect(
+        ReactDOM.findDOMNode(pagination).querySelector('li:first-child')
+          .className
+      ).toBe('previous disabled');
+      expect(
+        ReactDOM.findDOMNode(pagination).querySelector('li:last-child')
+          .className
+      ).toBe('next disabled');
     });
@@ -499,9 +610,18 @@ });
       );
-  
-      expect(ReactDOM.findDOMNode(linkedPagination).querySelector('li:last-child a')
-        .hasAttribute('href')).toBe(false);
-      expect(ReactDOM.findDOMNode(linkedPagination).querySelector('li:first-child a')
-        .hasAttribute('href')).toBe(false);
-      expect(ReactDOM.findDOMNode(linkedPagination).querySelector('.selected a')
-        .hasAttribute('href')).toBe(false);
+
+      expect(
+        ReactDOM.findDOMNode(linkedPagination)
+          .querySelector('li:last-child a')
+          .hasAttribute('href')
+      ).toBe(false);
+      expect(
+        ReactDOM.findDOMNode(linkedPagination)
+          .querySelector('li:first-child a')
+          .hasAttribute('href')
+      ).toBe(false);
+      expect(
+        ReactDOM.findDOMNode(linkedPagination)
+          .querySelector('.selected a')
+          .hasAttribute('href')
+      ).toBe(false);
     });
@@ -513,9 +633,14 @@ });
       const pagination = ReactTestUtils.renderIntoDocument(
-        <PaginationBoxView
-          previousClassName="prev"
-          nextClassName="next"
-        />
+        <PaginationBoxView previousClassName="prev" nextClassName="next" />
       );
-      expect(ReactDOM.findDOMNode(pagination).querySelector("li:not(.selected):not(.prev):not(.next) a").getAttribute('aria-label')).toBe("Page 2");
-      expect(ReactDOM.findDOMNode(pagination).querySelector(".selected a").getAttribute('aria-label')).toBe("Page 1 is your current page");
+      expect(
+        ReactDOM.findDOMNode(pagination)
+          .querySelector('li:not(.selected):not(.prev):not(.next) a')
+          .getAttribute('aria-label')
+      ).toBe('Page 2');
+      expect(
+        ReactDOM.findDOMNode(pagination)
+          .querySelector('.selected a')
+          .getAttribute('aria-label')
+      ).toBe('Page 1 is your current page');
     });
@@ -529,16 +654,18 @@ });
       const pagination = ReactTestUtils.renderIntoDocument(
-        <PaginationBoxView
-          previousLabel={"Custom previous label"}
-        />
+        <PaginationBoxView previousLabel={'Custom previous label'} />
       );
-      expect(ReactDOM.findDOMNode(pagination).querySelector("li:first-child a").textContent).toBe("Custom previous label");
+      expect(
+        ReactDOM.findDOMNode(pagination).querySelector('li:first-child a')
+          .textContent
+      ).toBe('Custom previous label');
     });
-  
+
     it('should use the nextLabel prop when defined', () => {
       const pagination = ReactTestUtils.renderIntoDocument(
-        <PaginationBoxView
-          nextLabel={"Custom next label"}
-        />
+        <PaginationBoxView nextLabel={'Custom next label'} />
       );
-      expect(ReactDOM.findDOMNode(pagination).querySelector("li:last-child a").textContent).toBe("Custom next label");
+      expect(
+        ReactDOM.findDOMNode(pagination).querySelector('li:last-child a')
+          .textContent
+      ).toBe('Custom next label');
     });
@@ -550,9 +677,16 @@ });
       const pagination = ReactTestUtils.renderIntoDocument(
-        <PaginationBoxView
-          breakLabel={"..."}
-        />
+        <PaginationBoxView breakLabel={'...'} />
       );
-      expect(ReactDOM.findDOMNode(pagination).querySelector("li.break").firstChild.nodeType).toBe(Node.ELEMENT_NODE);
-      expect(ReactDOM.findDOMNode(pagination).querySelector("li.break").firstChild.nodeName).toBe("A");
-      expect(ReactDOM.findDOMNode(pagination).querySelector("li.break").firstChild.textContent).toBe("...");
+      expect(
+        ReactDOM.findDOMNode(pagination).querySelector('li.break').firstChild
+          .nodeType
+      ).toBe(Node.ELEMENT_NODE);
+      expect(
+        ReactDOM.findDOMNode(pagination).querySelector('li.break').firstChild
+          .nodeName
+      ).toBe('A');
+      expect(
+        ReactDOM.findDOMNode(pagination).querySelector('li.break').firstChild
+          .textContent
+      ).toBe('...');
     });
@@ -562,5 +696,7 @@
       const pagination = ReactTestUtils.renderIntoDocument(
-        <PaginationBoxView breakClassName={"break-me"} />
+        <PaginationBoxView breakClassName={'break-me'} />
       );
-      expect(ReactDOM.findDOMNode(pagination).querySelector(".break-me")).not.toBe(null);
+      expect(
+        ReactDOM.findDOMNode(pagination).querySelector('.break-me')
+      ).not.toBe(null);
     });
@@ -575,3 +711,5 @@ });
       );
-      const nextItem = ReactDOM.findDOMNode(pagination).querySelector("li:last-child a");
+      const nextItem = ReactDOM.findDOMNode(pagination).querySelector(
+        'li:last-child a'
+      );
       ReactTestUtils.Simulate.click(nextItem);
@@ -588,3 +726,6 @@
       );
-      expect(ReactDOM.findDOMNode(pagination).querySelector(".selected a").textContent).toBe("3");
+      expect(
+        ReactDOM.findDOMNode(pagination).querySelector('.selected a')
+          .textContent
+      ).toBe('3');
     });
@@ -598,3 +739,6 @@ });
       );
-      expect(ReactDOM.findDOMNode(pagination).querySelector(".selected a").textContent).toBe("3");
+      expect(
+        ReactDOM.findDOMNode(pagination).querySelector('.selected a')
+          .textContent
+      ).toBe('3');
     });
@@ -620,5 +764,7 @@ });
       const pagination = ReactTestUtils.renderIntoDocument(
-        <PaginationBoxView containerClassName={"my-pagination"} />
+        <PaginationBoxView containerClassName={'my-pagination'} />
       );
-      expect(ReactDOM.findDOMNode(pagination).className).toEqual("my-pagination");
+      expect(ReactDOM.findDOMNode(pagination).className).toEqual(
+        'my-pagination'
+      );
     });
@@ -630,4 +776,4 @@ });
       const pagination = ReactTestUtils.renderIntoDocument(
-        <PaginationBoxView 
-          pageClassName={"page-item"}
+        <PaginationBoxView
+          pageClassName={'page-item'}
           previousClassName="prev"
@@ -638,7 +784,16 @@ nextClassName="next"
 
-      const pageItem = ReactDOM.findDOMNode(pagination).querySelector("li:nth-child(3) a");
+      const pageItem = ReactDOM.findDOMNode(pagination).querySelector(
+        'li:nth-child(3) a'
+      );
       ReactTestUtils.Simulate.click(pageItem);
 
-      expect(ReactDOM.findDOMNode(pagination).querySelector("li:not(.selected):not(.prev):not(.next)").className).toBe("page-item");
-      expect(ReactDOM.findDOMNode(pagination).querySelector("li:nth-child(3)").className).toBe("page-item selected");
+      expect(
+        ReactDOM.findDOMNode(pagination).querySelector(
+          'li:not(.selected):not(.prev):not(.next)'
+        ).className
+      ).toBe('page-item');
+      expect(
+        ReactDOM.findDOMNode(pagination).querySelector('li:nth-child(3)')
+          .className
+      ).toBe('page-item selected');
     });
@@ -655,6 +810,11 @@
 
-      const pageItem = ReactDOM.findDOMNode(pagination).querySelector("li:nth-child(3) a");
+      const pageItem = ReactDOM.findDOMNode(pagination).querySelector(
+        'li:nth-child(3) a'
+      );
       ReactTestUtils.Simulate.click(pageItem);
 
-      expect(ReactDOM.findDOMNode(pagination).querySelector("li:nth-child(3)").className).toBe("active-page-item");
+      expect(
+        ReactDOM.findDOMNode(pagination).querySelector('li:nth-child(3)')
+          .className
+      ).toBe('active-page-item');
     });
@@ -672,7 +832,16 @@
 
-      const pageItem = ReactDOM.findDOMNode(pagination).querySelector("li:nth-child(3) a");
+      const pageItem = ReactDOM.findDOMNode(pagination).querySelector(
+        'li:nth-child(3) a'
+      );
       ReactTestUtils.Simulate.click(pageItem);
 
-      expect(ReactDOM.findDOMNode(pagination).querySelector("li:not(.selected):not(.prev):not(.next)").className).toBe("page-item");
-      expect(ReactDOM.findDOMNode(pagination).querySelector("li:nth-child(3)").className).toBe("page-item active-page-item");
+      expect(
+        ReactDOM.findDOMNode(pagination).querySelector(
+          'li:not(.selected):not(.prev):not(.next)'
+        ).className
+      ).toBe('page-item');
+      expect(
+        ReactDOM.findDOMNode(pagination).querySelector('li:nth-child(3)')
+          .className
+      ).toBe('page-item active-page-item');
     });
@@ -690,5 +859,11 @@ });
       );
-      
-      expect(ReactDOM.findDOMNode(pagination).querySelector("li:not(.selected):not(.prev):not(.next) a").className).toBe("page-item-link");
-      expect(ReactDOM.findDOMNode(pagination).querySelector(".selected a").className).toBe("page-item-link");
+
+      expect(
+        ReactDOM.findDOMNode(pagination).querySelector(
+          'li:not(.selected):not(.prev):not(.next) a'
+        ).className
+      ).toBe('page-item-link');
+      expect(
+        ReactDOM.findDOMNode(pagination).querySelector('.selected a').className
+      ).toBe('page-item-link');
     });
@@ -703,3 +878,5 @@
       );
-      expect(ReactDOM.findDOMNode(pagination).querySelector(".selected a").className).toBe("active-page-item-link");
+      expect(
+        ReactDOM.findDOMNode(pagination).querySelector('.selected a').className
+      ).toBe('active-page-item-link');
     });
@@ -716,4 +893,10 @@
       );
-      expect(ReactDOM.findDOMNode(pagination).querySelector("li:not(.selected):not(.prev):not(.next) a").className).toBe("page-item-link");
-      expect(ReactDOM.findDOMNode(pagination).querySelector(".selected a").className).toBe("page-item-link active-page-item-link");
+      expect(
+        ReactDOM.findDOMNode(pagination).querySelector(
+          'li:not(.selected):not(.prev):not(.next) a'
+        ).className
+      ).toBe('page-item-link');
+      expect(
+        ReactDOM.findDOMNode(pagination).querySelector('.selected a').className
+      ).toBe('page-item-link active-page-item-link');
     });
@@ -725,8 +908,11 @@ });
       const pagination = ReactTestUtils.renderIntoDocument(
-        <PaginationBoxView 
+        <PaginationBoxView
           initialPage={2}
-          previousClassName="custom-previous-classname" 
+          previousClassName="custom-previous-classname"
         />
       );
-      expect(ReactDOM.findDOMNode(pagination).querySelector("li:first-child").className).toBe("custom-previous-classname");
+      expect(
+        ReactDOM.findDOMNode(pagination).querySelector('li:first-child')
+          .className
+      ).toBe('custom-previous-classname');
     });
@@ -736,3 +922,3 @@
       const pagination = ReactTestUtils.renderIntoDocument(
-        <PaginationBoxView 
+        <PaginationBoxView
           initialPage={2}
@@ -742,3 +928,6 @@ nextClassName="custom-next-classname"
       );
-      expect(ReactDOM.findDOMNode(pagination).querySelector("li:last-child").className).toBe("custom-next-classname");
+      expect(
+        ReactDOM.findDOMNode(pagination).querySelector('li:last-child')
+          .className
+      ).toBe('custom-next-classname');
     });
@@ -750,8 +939,11 @@ });
       const pagination = ReactTestUtils.renderIntoDocument(
-        <PaginationBoxView 
+        <PaginationBoxView
           initialPage={2}
-          previousLinkClassName="custom-previous-link-classname" 
+          previousLinkClassName="custom-previous-link-classname"
         />
       );
-      expect(ReactDOM.findDOMNode(pagination).querySelector("li:first-child a").className).toBe("custom-previous-link-classname");
+      expect(
+        ReactDOM.findDOMNode(pagination).querySelector('li:first-child a')
+          .className
+      ).toBe('custom-previous-link-classname');
     });
@@ -761,3 +953,3 @@
       const pagination = ReactTestUtils.renderIntoDocument(
-        <PaginationBoxView 
+        <PaginationBoxView
           initialPage={2}
@@ -767,3 +959,6 @@ nextLinkClassName="custom-next-link-classname"
       );
-      expect(ReactDOM.findDOMNode(pagination).querySelector("li:last-child a").className).toBe("custom-next-link-classname");
+      expect(
+        ReactDOM.findDOMNode(pagination).querySelector('li:last-child a')
+          .className
+      ).toBe('custom-next-link-classname');
     });
@@ -781,4 +976,10 @@ });
       );
-      expect(ReactDOM.findDOMNode(pagination).querySelector("li:first-child").className).toBe("previous custom-disabled-classname");
-      expect(ReactDOM.findDOMNode(pagination).querySelector("li:last-child").className).toBe("next custom-disabled-classname");
+      expect(
+        ReactDOM.findDOMNode(pagination).querySelector('li:first-child')
+          .className
+      ).toBe('previous custom-disabled-classname');
+      expect(
+        ReactDOM.findDOMNode(pagination).querySelector('li:last-child')
+          .className
+      ).toBe('next custom-disabled-classname');
     });
@@ -792,11 +993,21 @@ });
           initialPage={1}
-          hrefBuilder={(page) => '/page/' + page } />
+          hrefBuilder={page => '/page/' + page}
+        />
       );
-  
-      expect(ReactDOM.findDOMNode(pagination).querySelector('li:last-child a')
-        .getAttribute('href')).toBe('/page/3');
-      expect(ReactDOM.findDOMNode(pagination).querySelector('li:first-child a')
-        .getAttribute('href')).toBe('/page/1');
-      expect(ReactDOM.findDOMNode(pagination).querySelector('.selected a')
-        .getAttribute('href')).toBe(null);
+
+      expect(
+        ReactDOM.findDOMNode(pagination)
+          .querySelector('li:last-child a')
+          .getAttribute('href')
+      ).toBe('/page/3');
+      expect(
+        ReactDOM.findDOMNode(pagination)
+          .querySelector('li:first-child a')
+          .getAttribute('href')
+      ).toBe('/page/1');
+      expect(
+        ReactDOM.findDOMNode(pagination)
+          .querySelector('.selected a')
+          .getAttribute('href')
+      ).toBe(null);
     });
@@ -814,6 +1025,66 @@ });
       );
-      expect(ReactDOM.findDOMNode(pagination).querySelector("li:not(.selected):not(.prev):not(.next) a").getAttribute('aria-label')).toBe("Page 2 can be clicked");
-      expect(ReactDOM.findDOMNode(pagination).querySelector(".selected a").getAttribute('aria-label')).toBe("Page 1 is your current page");
+      expect(
+        ReactDOM.findDOMNode(pagination)
+          .querySelector('li:not(.selected):not(.prev):not(.next) a')
+          .getAttribute('aria-label')
+      ).toBe('Page 2 can be clicked');
+      expect(
+        ReactDOM.findDOMNode(pagination)
+          .querySelector('.selected a')
+          .getAttribute('aria-label')
+      ).toBe('Page 1 is your current page');
     });
   });
+
+  describe('aria-disabled', () => {
+    it('should be true for previous link when link is disabled', () => {
+      const pagination = ReactTestUtils.renderIntoDocument(
+        <PaginationBoxView initialPage={0} pageCount={5} />
+      );
+      expect(
+        ReactDOM.findDOMNode(pagination)
+          .querySelector('li:first-child a')
+          .getAttribute('aria-disabled')
+      ).toBe('true');
+      expect(
+        ReactDOM.findDOMNode(pagination)
+          .querySelector('li:last-child a')
+          .getAttribute('aria-disabled')
+      ).toBe('false');
+    });
+
+    it('should be true for next link when link is disabled', () => {
+      const pagination = ReactTestUtils.renderIntoDocument(
+        <PaginationBoxView initialPage={4} pageCount={5} />
+      );
+
+      expect(
+        ReactDOM.findDOMNode(pagination)
+          .querySelector('li:first-child a')
+          .getAttribute('aria-disabled')
+      ).toBe('false');
+      expect(
+        ReactDOM.findDOMNode(pagination)
+          .querySelector('li:last-child a')
+          .getAttribute('aria-disabled')
+      ).toBe('true');
+    });
+  });
+
+  it('should be true for both previous and next links when only one page', () => {
+    const pagination = ReactTestUtils.renderIntoDocument(
+      <PaginationBoxView initialPage={0} pageCount={1} />
+    );
+
+    expect(
+      ReactDOM.findDOMNode(pagination)
+        .querySelector('li:first-child a')
+        .getAttribute('aria-disabled')
+    ).toBe('true');
+    expect(
+      ReactDOM.findDOMNode(pagination)
+        .querySelector('li:last-child a')
+        .getAttribute('aria-disabled')
+    ).toBe('true');
+  });
 });

demo/data.js

 'use strict';
 
-var fs         = require('fs');
-var path       = require('path');
-var util       = require('util');
+var fs = require('fs');
+var path = require('path');
+var util = require('util');
 
-
 function generateData() {
-
   var comments = [];
@@ -14,4 +12,4 @@
     comments.push({
-      username : util.format('user-%s', i),
-      comment  : util.format('This is the comment #%d', i)
+      username: util.format('user-%s', i),
+      comment: util.format('This is the comment #%d', i),
     });
@@ -26,7 +24,8 @@ }
   }
-  fs.writeFileSync(path.join(dataDir, 'data.json'),
-                   JSON.stringify(comments, null, 2));
+  fs.writeFileSync(
+    path.join(dataDir, 'data.json'),
+    JSON.stringify(comments, null, 2)
+  );
+}
 
-};
-
 generateData();

demo/js/demo.js

 import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
+import PropTypes from 'prop-types';
 import ReactPaginate from 'react-paginate';
@@ -8,9 +9,10 @@ import $ from 'jquery';
 
+export class CommentList extends Component {
+  static propTypes = {
+    data: PropTypes.array.isRequired,
+  };
 
-export class CommentList extends Component {
   render() {
     let commentNodes = this.props.data.map(function(comment, index) {
-      return (
-        <div key={index}>{comment.comment}</div>
-      );
+      return <div key={index}>{comment.comment}</div>;
     });
@@ -20,11 +22,15 @@
       <div id="project-comments" className="commentList">
-        <ul>
-          {commentNodes}
-        </ul>
+        <ul>{commentNodes}</ul>
       </div>
     );
   }
-};
+}
 
 export class App extends Component {
+  static propTypes = {
+    url: PropTypes.string.isRequired,
+    author: PropTypes.string.isRequired,
+    perPage: PropTypes.number.isRequired,
+  };
+
   constructor(props) {
@@ -35,4 +41,4 @@ super(props);
       data: [],
-      offset: 0
-    }
+      offset: 0,
+    };
   }
@@ -42,14 +48,17 @@
     $.ajax({
-      url      : this.props.url,
-      data     : {limit: this.props.perPage, offset: this.state.offset},
-      dataType : 'json',
-      type     : 'GET',
+      url: this.props.url,
+      data: { limit: this.props.perPage, offset: this.state.offset },
+      dataType: 'json',
+      type: 'GET',
 
       success: data => {
-        this.setState({data: data.comments, pageCount: Math.ceil(data.meta.total_count / data.meta.limit)});
+        this.setState({
+          data: data.comments,
+          pageCount: Math.ceil(data.meta.total_count / data.meta.limit),
+        });
       },
 
       error: (xhr, status, err) => {
-        console.error(this.props.url, status, err.toString());
-      }
+        console.error(this.props.url, status, err.toString()); // eslint-disable-line
+      },
     });
@@ -62,7 +71,7 @@ }
 
-  handlePageClick = (data) => {
+  handlePageClick = data => {
     let selected = data.selected;
     let offset = Math.ceil(selected * this.props.perPage);
 
-    this.setState({offset: offset}, () => {
+    this.setState({ offset: offset }, () => {
       this.loadCommentsFromServer();
@@ -76,23 +85,23 @@ });
         <CommentList data={this.state.data} />
-        <ReactPaginate previousLabel={"previous"}
-                       nextLabel={"next"}
-                       breakLabel={"..."}
-                       breakClassName={"break-me"}
-                       pageCount={this.state.pageCount}
-                       marginPagesDisplayed={2}
-                       pageRangeDisplayed={5}
-                       onPageChange={this.handlePageClick}
-                       containerClassName={"pagination"}
-                       subContainerClassName={"pages pagination"}
-                       activeClassName={"active"} />
+        <ReactPaginate
+          previousLabel={'previous'}
+          nextLabel={'next'}
+          breakLabel={'...'}
+          breakClassName={'break-me'}
+          pageCount={this.state.pageCount}
+          marginPagesDisplayed={2}
+          pageRangeDisplayed={5}
+          onPageChange={this.handlePageClick}
+          containerClassName={'pagination'}
+          subContainerClassName={'pages pagination'}
+          activeClassName={'active'}
+        />
       </div>
     );
   }
-};
+}
 
 ReactDOM.render(
-  <App url={'http://localhost:3000/comments'}
-       author={'adele'}
-       perPage={10} />,
+  <App url={'http://localhost:3000/comments'} author={'adele'} perPage={10} />,
   document.getElementById('react-paginate')
 );

demo/server.js

 'use strict';
 
-var fs          = require('fs');
-var path        = require('path');
-var util        = require('util');
-var express     = require('express');
+var fs = require('fs');
+var path = require('path');
+var util = require('util');
+var express = require('express');
 var serveStatic = require('serve-static');
 
-var webpack = require('webpack')
-var webpackDevMiddleware = require('webpack-dev-middleware')
-var WebpackConfig = require('./webpack.config')
+var webpack = require('webpack');
+var webpackDevMiddleware = require('webpack-dev-middleware');
+var WebpackConfig = require('./webpack.config');
 
-var app         = module.exports.app = exports.app = express();
+var app = (module.exports.app = exports.app = express());
 
-var ROOT_DIR   = path.join(__dirname, '.');
+var ROOT_DIR = path.join(__dirname, '.');
 var STYLES_DIR = path.join(__dirname, 'styles');
-var DATA       = path.join(__dirname, 'data', 'data.json');
-var NODE_PORT  = process.env.NODE_PORT || 3000;
-var NODE_ENV   = process.env.NODE_ENV || 'development';
-var PER_PAGE   = 10;
+var DATA = path.join(__dirname, 'data', 'data.json');
+var NODE_PORT = process.env.NODE_PORT || 3000;
+var NODE_ENV = process.env.NODE_ENV || 'development';
+var PER_PAGE = 10;
 
-
 app.use(serveStatic(ROOT_DIR));
 app.use(serveStatic(STYLES_DIR));
 
+app.use(
+  webpackDevMiddleware(webpack(WebpackConfig), {
+    publicPath: '/build/',
+    stats: {
+      colors: true,
+    },
+  })
+);
 
-app.use(webpackDevMiddleware(webpack(WebpackConfig), {
-  publicPath: '/build/',
-  stats: {
-    colors: true
-  }
-}))
-
-
 function getPaginatedItems(items, offset) {
@@ -40,28 +39,25 @@ return items.slice(offset, offset + PER_PAGE);
 app.get('/comments', function(req, res) {
+  var items = JSON.parse(fs.readFileSync(DATA));
+  var offset = req.query.offset ? parseInt(req.query.offset, 10) : 0;
+  var nextOffset = offset + PER_PAGE;
+  var previousOffset = offset - PER_PAGE < 1 ? 0 : offset - PER_PAGE;
 
-  var items          = JSON.parse(fs.readFileSync(DATA));
-  var offset         = req.query.offset ? parseInt(req.query.offset, 10) : 0;
-  var nextOffset     = offset + PER_PAGE;
-  var previousOffset = (offset - PER_PAGE < 1) ? 0 : offset - PER_PAGE;
-
   var meta = {
-    limit       : PER_PAGE,
-    next        : util.format('?limit=%s&offset=%s', PER_PAGE, nextOffset),
-    offset      : req.query.offset,
-    previous    : util.format('?limit=%s&offset=%s', PER_PAGE, previousOffset),
-    total_count : items.length
+    limit: PER_PAGE,
+    next: util.format('?limit=%s&offset=%s', PER_PAGE, nextOffset),
+    offset: req.query.offset,
+    previous: util.format('?limit=%s&offset=%s', PER_PAGE, previousOffset),
+    total_count: items.length,
   };
 
   var json = {
-    meta     : meta,
-    comments : getPaginatedItems(items, offset)
+    meta: meta,
+    comments: getPaginatedItems(items, offset),
   };
 
   return res.json(json);
-
 });
 
-
 app.listen(NODE_PORT, function() {
-  console.log('Demo server running on %s mode on port %d', NODE_ENV, NODE_PORT);
+  console.log('Demo server running on %s mode on port %d', NODE_ENV, NODE_PORT); // eslint-disable-line
 });

demo/webpack.config.js

@@ -6,41 +6,40 @@ /* global __dirname */
 const dir_js = path.resolve(__dirname, 'js');
-const dir_html = path.resolve(__dirname, 'html');
 const dir_build = path.resolve(__dirname, 'build');
 
 module.exports = {
-    entry: path.resolve(dir_js, 'demo.js'),
-    output: {
-        path: dir_build,
-        filename: 'demo.js',
-        publicPath: 'build'
+  entry: path.resolve(dir_js, 'demo.js'),
+  output: {
+    path: dir_build,
+    filename: 'demo.js',
+    publicPath: 'build',
+  },
+  devServer: {
+    contentBase: dir_build,
+  },
+  module: {
+    rules: [
+      {
+        use: 'react-hot-loader/webpack',
+        test: dir_js,
+      },
+      {
+        use: 'babel-loader',
+        test: dir_js,
+      },
+      {
+        use: 'babel-loader',
+        test: path.join(__dirname, '..', 'react_components'),
+      },
+    ],
+  },
+  resolve: {
+    alias: {
+      'react-paginate': path.join(__dirname, '..', 'react_components'),
     },
-    devServer: {
-        contentBase: dir_build,
-    },
-    module: {
-        rules: [
-            {
-                use: 'react-hot-loader/webpack',
-                test: dir_js,
-            },
-            {
-                use: 'babel-loader',
-                test: dir_js
-            },
-            {
-                use: 'babel-loader',
-                test: path.join(__dirname, '..', 'react_components')
-            }
-        ]
-    },
-    resolve: {
-        alias: {
-            'react-paginate': path.join(__dirname, '..', 'react_components')
-        }
-    },
-    stats: {
-        colors: true
-    },
-    devtool: 'source-map',
-    mode: 'development'
+  },
+  stats: {
+    colors: true,
+  },
+  devtool: 'source-map',
+  mode: 'development',
 };

dist/BreakView.js

@@ -11,2 +11,6 @@ 'use strict';
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -24,6 +28,3 @@
       'a',
-      { onClick: onClick,
-        role: 'button',
-        tabIndex: '0',
-        onKeyPress: onClick },
+      { onClick: onClick, role: 'button', tabIndex: '0', onKeyPress: onClick },
       label
@@ -34,3 +35,9 @@ )
 
+BreakView.propTypes = {
+  breakLabel: _propTypes2.default.string.isRequired,
+  breakClassName: _propTypes2.default.string,
+  onClick: _propTypes2.default.func.isRequired
+};
+
 exports.default = BreakView;
 //# sourceMappingURL=BreakView.js.map

dist/PageView.js

@@ -11,2 +11,6 @@ 'use strict';
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -35,4 +39,2 @@
     if (typeof pageLinkClassName !== 'undefined') {
-      pageLinkClassName = pageLinkClassName;
-
       if (typeof props.activeLinkClassName !== 'undefined') {
@@ -51,3 +53,4 @@ pageLinkClassName = pageLinkClassName + ' ' + props.activeLinkClassName;
       'a',
-      { onClick: onClick,
+      {
+        onClick: onClick,
         role: 'button',
@@ -59,3 +62,4 @@ className: pageLinkClassName,
         'aria-current': ariaCurrent,
-        onKeyPress: onClick },
+        onKeyPress: onClick
+      },
       props.page
@@ -66,3 +70,15 @@ )
 
+PageView.propTypes = {
+  onClick: _propTypes2.default.func.isRequired,
+  selected: _propTypes2.default.bool.isRequired,
+  pageClassName: _propTypes2.default.string,
+  pageLinkClassName: _propTypes2.default.string,
+  activeClassName: _propTypes2.default.string,
+  activeLinkClassName: _propTypes2.default.string,
+  extraAriaContext: _propTypes2.default.string,
+  href: _propTypes2.default.string,
+  page: _propTypes2.default.number.isRequired
+};
+
 exports.default = PageView;
 //# sourceMappingURL=PageView.js.map

dist/PaginationBoxView.js

@@ -82,3 +82,3 @@ 'use strict';
     _this.callCallback = function (selectedItem) {
-      if (typeof _this.props.onPageChange !== "undefined" && typeof _this.props.onPageChange === "function") {
+      if (typeof _this.props.onPageChange !== 'undefined' && typeof _this.props.onPageChange === 'function') {
         _this.props.onPageChange({ selected: selectedItem });
@@ -100,3 +100,2 @@ }
       if (pageCount <= pageRangeDisplayed) {
-
         for (var index = 0; index < pageCount; index++) {
@@ -106,3 +105,2 @@ items.push(_this.getPageElement(index));
       } else {
-
         var leftSide = pageRangeDisplayed / 2;
@@ -131,3 +129,2 @@ var rightSide = pageRangeDisplayed - leftSide;
         for (_index = 0; _index < pageCount; _index++) {
-
           page = _index + 1;
@@ -179,4 +176,13 @@
 
+    var initialSelected = void 0;
+    if (props.initialPage) {
+      initialSelected = props.initialPage;
+    } else if (props.forcePage) {
+      initialSelected = props.forcePage;
+    } else {
+      initialSelected = 0;
+    }
+
     _this.state = {
-      selected: props.initialPage ? props.initialPage : props.forcePage ? props.forcePage : 0
+      selected: initialSelected
     };
@@ -199,4 +205,4 @@ return _this;
   }, {
-    key: 'componentWillReceiveProps',
-    value: function componentWillReceiveProps(nextProps) {
+    key: 'UNSAFE_componentWillReceiveProps',
+    value: function UNSAFE_componentWillReceiveProps(nextProps) {
       if (typeof nextProps.forcePage !== 'undefined' && this.props.forcePage !== nextProps.forcePage) {
@@ -261,3 +267,4 @@ this.setState({ selected: nextProps.forcePage });
         href: this.hrefBuilder(index),
-        page: index + 1 });
+        page: index + 1
+      });
     }
@@ -283,2 +290,5 @@ }, {
 
+      var previousAriaDisabled = selected === 0 ? 'true' : 'false';
+      var nextAriaDisabled = selected === pageCount - 1 ? 'true' : 'false';
+
       return _react2.default.createElement(
@@ -292,3 +302,4 @@ 'ul',
             'a',
-            { onClick: this.handlePreviousPage,
+            {
+              onClick: this.handlePreviousPage,
               className: previousLinkClassName,
@@ -298,3 +309,5 @@ href: this.hrefBuilder(selected - 1),
               role: 'button',
-              onKeyPress: this.handlePreviousPage },
+              onKeyPress: this.handlePreviousPage,
+              'aria-disabled': previousAriaDisabled
+            },
             previousLabel
@@ -309,3 +322,4 @@ )
             'a',
-            { onClick: this.handleNextPage,
+            {
+              onClick: this.handleNextPage,
               className: nextLinkClassName,
@@ -315,3 +329,5 @@ href: this.hrefBuilder(selected + 1),
               role: 'button',
-              onKeyPress: this.handleNextPage },
+              onKeyPress: this.handleNextPage,
+              'aria-disabled': nextAriaDisabled
+            },
             nextLabel
@@ -349,3 +365,4 @@ )
   disabledClassName: _propTypes2.default.string,
-  breakClassName: _propTypes2.default.string
+  breakClassName: _propTypes2.default.string,
+  extraAriaContext: _propTypes2.default.string
 };
@@ -356,13 +373,12 @@ PaginationBoxView.defaultProps = {
   marginPagesDisplayed: 3,
-  activeClassName: "selected",
-  previousClassName: "previous",
-  nextClassName: "next",
-  previousLabel: "Previous",
-  nextLabel: "Next",
-  breakLabel: "...",
-  disabledClassName: "disabled",
+  activeClassName: 'selected',
+  previousClassName: 'previous',
+  nextClassName: 'next',
+  previousLabel: 'Previous',
+  nextLabel: 'Next',
+  breakLabel: '...',
+  disabledClassName: 'disabled',
   disableInitialCallback: false
 };
 exports.default = PaginationBoxView;
-;
 //# sourceMappingURL=PaginationBoxView.js.map

HISTORY.md

@@ -0,77 +1,73 @@
+## >= 6.1.0
+
+- Add aria-disabled prop to anchors for accessibility (https://github.com/AdeleD/react-paginate/pull/254)
+- Setup eslint and prettier for dev
+
 ## >= 6.0.0
 
-* Implement forward/backward jump when clicking on a breakview (ellipsis).
-* The 'breakLabel' prop should not receive an `<a>` tag anymore. Otherwise, a warning will appear in the JS console: `validateDOMNesting(...): <a> cannot appear as a descendant of <a>.`
+- Implement forward/backward jump when clicking on a breakview (ellipsis).
+- The 'breakLabel' prop should not receive an `<a>` tag anymore. Otherwise, a warning will appear in the JS console: `validateDOMNesting(...): <a> cannot appear as a descendant of <a>.`
 
 ## >= 5.3.1
 
-* Tests improvements + fix package release (https://github.com/AdeleD/react-paginate/issues/245).
+- Tests improvements + fix package release (https://github.com/AdeleD/react-paginate/issues/245).
 
 ## >= 5.3.0
 
-* Add the activeLinkClassName property.
+- Add the activeLinkClassName property.
 
 ## >= 5.2.5
 
-* Upgrade webpack dev dependencies (Fix "Cannot read property 'properties' of undefined" from webpack-cli).
+- Upgrade webpack dev dependencies (Fix "Cannot read property 'properties' of undefined" from webpack-cli).
 
 ## >= 5.2.4
 
-* Use ES6 export in react_components/index.js (https://github.com/AdeleD/react-paginate/pull/203).
+- Use ES6 export in react_components/index.js (https://github.com/AdeleD/react-paginate/pull/203).
 
-
 ## >= 5.2.3
 
-* Add a role="button" on `<a>` tags to let screen readers know explicitly that links (without href) are intended to be interactive elements (https://github.com/AdeleD/react-paginate/issues/212).
+- Add a role="button" on `<a>` tags to let screen readers know explicitly that links (without href) are intended to be interactive elements (https://github.com/AdeleD/react-paginate/issues/212).
 
-
 ## >= 5.2.2
 
-* Remove the useless node_modules folder from the previous release (https://github.com/AdeleD/react-paginate/issues/208).
+- Remove the useless node_modules folder from the previous release (https://github.com/AdeleD/react-paginate/issues/208).
 
-
 ## >= 5.2.1
 
-* Fix `disabledClassName` not used in previous and next classnames (https://github.com/AdeleD/react-paginate/issues/204).
+- Fix `disabledClassName` not used in previous and next classnames (https://github.com/AdeleD/react-paginate/issues/204).
 
-
 ## >= 5.2.0
 
-* Delete the dependency on `react-addons-create-fragment`.
-* Delete the dependency on `classnames`.
+- Delete the dependency on `react-addons-create-fragment`.
+- Delete the dependency on `classnames`.
 
-
 ## >= 5.1.0
 
-* Refactor using destructuring.
-* Upgrade react-hot-loader to version 3.0.0 (dev dependency).
+- Refactor using destructuring.
+- Upgrade react-hot-loader to version 3.0.0 (dev dependency).
 
-
 ## >= 5.0.0
 
-* Compatibility with React v16.0
+- Compatibility with React v16.0
 
-
 ## >= 4.3.0
 
-* The HTML attribute `aria-label` has been added.
-* A new prop `extraAriaContext` allows to add some extra text to the end of the `aria-label` to provide additional context to the users.
+- The HTML attribute `aria-label` has been added.
+- A new prop `extraAriaContext` allows to add some extra text to the end of the `aria-label` to provide additional context to the users.
 
-
 ## >= 4.2.0
 
-* A new prop `hrefBuilder` has been added. It allows to add custom `href` attributes on `<a>` tags of the component.
-* Packages `react` and `react-addons-create-fragment` are now dependencies (see package.json).
+- A new prop `hrefBuilder` has been added. It allows to add custom `href` attributes on `<a>` tags of the component.
+- Packages `react` and `react-addons-create-fragment` are now dependencies (see package.json).
 
-
 ## >= 4.0.0
 
-* Some variable have been renamed:
-  * `clickCallback` -> `onPageChange`
-  * `initialSelected` -> `initialPage`
-  * `forceSelected` -> `forcePage`
-  * `pageNum` -> `pageCount`
+- Some variable have been renamed:
 
-* `onClick` events have been moved on `<a>` tags (previously on `<li>`s).
+  - `clickCallback` -> `onPageChange`
+  - `initialSelected` -> `initialPage`
+  - `forceSelected` -> `forcePage`
+  - `pageNum` -> `pageCount`
 
+- `onClick` events have been moved on `<a>` tags (previously on `<li>`s).
 
@@ -82,3 +78,2 @@ ## >= 3.0.0
 
-
 ## >= 1.0.0
@@ -90,3 +85,5 @@
 <ul class="pagination">
-  <li class="disabled"><a href="#"><span>«</span></a></li>
+  <li class="disabled">
+    <a href="#"><span>«</span></a>
+  </li>
   <li class="active"><a href="#">1</a></li>
@@ -97,7 +94,8 @@ <li><a href="#">2</a></li>
   <li><a href="#">5</a></li>
-  <li><a href="#"><span>»</span></a></li>
+  <li>
+    <a href="#"><span>»</span></a>
+  </li>
 </ul>
 ```
 
-
 ## <= 0.5.7
@@ -109,3 +107,5 @@
 <ul>
-  <li class="disabled"><a href="#"><span>«</span></a></li>
+  <li class="disabled">
+    <a href="#"><span>«</span></a>
+  </li>
   <li>
@@ -120,4 +120,6 @@ <ul>
   </li>
-  <li><a href="#"><span>»</span></a></li>
+  <li>
+    <a href="#"><span>»</span></a>
+  </li>
 </ul>
 ```

package.json

 {
   "name": "react-paginate",
-  "version": "6.0.0",
+  "version": "6.1.0",
   "description": "A ReactJS component that creates a pagination.",
@@ -32,2 +32,3 @@ "main": "./dist/index.js",
     "babel-core": "^6.26.0",
+    "babel-eslint": "^10.0.1",
     "babel-jest": "^23.0.0-alpha.0",
@@ -38,5 +39,10 @@ "babel-loader": "^7.1.4",
     "babel-preset-react": "^6.24.1",
+    "eslint": "^5.12.0",
+    "eslint-config-prettier": "^3.3.0",
+    "eslint-plugin-prettier": "^3.0.1",
+    "eslint-plugin-react": "^7.12.3",
     "express": "^4.14.0",
     "jest-cli": "^23.0.0-alpha.0",
     "jquery": "^3.1.1",
+    "prettier": "1.15.3",
     "react": "^16.2.0",
@@ -43,0 +49,0 @@ "react-dom": "^16.2.0",

react_components/BreakView.js

 'use strict';
 
 import React from 'react';
+import PropTypes from 'prop-types';
 
-const BreakView = (props) => {
+const BreakView = props => {
   const label = props.breakLabel;
@@ -12,6 +13,3 @@ const className = props.breakClassName || 'break';
     <li className={className}>
-      <a onClick={onClick}
-        role="button"
-        tabIndex="0"
-        onKeyPress={onClick}>
+      <a onClick={onClick} role="button" tabIndex="0" onKeyPress={onClick}>
         {label}
@@ -21,4 +19,10 @@ </a>
   );
-}
+};
 
+BreakView.propTypes = {
+  breakLabel: PropTypes.string.isRequired,
+  breakClassName: PropTypes.string,
+  onClick: PropTypes.func.isRequired,
+};
+
 export default BreakView;

react_components/index.js

 import PaginationBoxView from './PaginationBoxView';
 
 export default PaginationBoxView;

react_components/PageView.js

 'use strict';
 
 import React from 'react';
+import PropTypes from 'prop-types';
 
-const PageView = (props) => {
+const PageView = props => {
   let pageClassName = props.pageClassName;
@@ -12,3 +13,5 @@ let pageLinkClassName = props.pageLinkClassName;
 
-  let ariaLabel = 'Page ' + props.page +
+  let ariaLabel =
+    'Page ' +
+    props.page +
     (props.extraAriaContext ? ' ' + props.extraAriaContext : '');
@@ -21,3 +24,3 @@ let ariaCurrent = null;
 
-    if (typeof(pageClassName) !== 'undefined') {
+    if (typeof pageClassName !== 'undefined') {
       pageClassName = pageClassName + ' ' + props.activeClassName;
@@ -28,6 +31,4 @@ } else {
 
-    if (typeof(pageLinkClassName) !== 'undefined') {
-      pageLinkClassName = pageLinkClassName;
-
-      if (typeof(props.activeLinkClassName) !== 'undefined') {
+    if (typeof pageLinkClassName !== 'undefined') {
+      if (typeof props.activeLinkClassName !== 'undefined') {
         pageLinkClassName = pageLinkClassName + ' ' + props.activeLinkClassName;
@@ -42,3 +43,4 @@ }
     <li className={pageClassName}>
-      <a onClick={onClick}
+      <a
+        onClick={onClick}
         role="button"
@@ -50,9 +52,22 @@ className={pageLinkClassName}
         aria-current={ariaCurrent}
-        onKeyPress={onClick}>
+        onKeyPress={onClick}
+      >
         {props.page}
       </a>
     </li>
-  )
-}
+  );
+};
 
+PageView.propTypes = {
+  onClick: PropTypes.func.isRequired,
+  selected: PropTypes.bool.isRequired,
+  pageClassName: PropTypes.string,
+  pageLinkClassName: PropTypes.string,
+  activeClassName: PropTypes.string,
+  activeLinkClassName: PropTypes.string,
+  extraAriaContext: PropTypes.string,
+  href: PropTypes.string,
+  page: PropTypes.number.isRequired,
+};
+
 export default PageView;

react_components/PaginationBoxView.js

@@ -8,44 +8,41 @@ 'use strict';
 
-
 export default class PaginationBoxView extends Component {
   static propTypes = {
-    pageCount             : PropTypes.number.isRequired,
-    pageRangeDisplayed    : PropTypes.number.isRequired,
-    marginPagesDisplayed  : PropTypes.number.isRequired,
-    previousLabel         : PropTypes.node,
-    nextLabel             : PropTypes.node,
-    breakLabel            : PropTypes.oneOfType([
-                              PropTypes.string,
-                              PropTypes.node,
-                            ]),
-    hrefBuilder           : PropTypes.func,
-    onPageChange          : PropTypes.func,
-    initialPage           : PropTypes.number,
-    forcePage             : PropTypes.number,
+    pageCount: PropTypes.number.isRequired,
+    pageRangeDisplayed: PropTypes.number.isRequired,
+    marginPagesDisplayed: PropTypes.number.isRequired,
+    previousLabel: PropTypes.node,
+    nextLabel: PropTypes.node,
+    breakLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+    hrefBuilder: PropTypes.func,
+    onPageChange: PropTypes.func,
+    initialPage: PropTypes.number,
+    forcePage: PropTypes.number,
     disableInitialCallback: PropTypes.bool,
-    containerClassName    : PropTypes.string,
-    pageClassName         : PropTypes.string,
-    pageLinkClassName     : PropTypes.string,
-    activeClassName       : PropTypes.string,
-    activeLinkClassName   : PropTypes.string,
-    previousClassName     : PropTypes.string,
-    nextClassName         : PropTypes.string,
-    previousLinkClassName : PropTypes.string,
-    nextLinkClassName     : PropTypes.string,
-    disabledClassName     : PropTypes.string,
-    breakClassName        : PropTypes.string
+    containerClassName: PropTypes.string,
+    pageClassName: PropTypes.string,
+    pageLinkClassName: PropTypes.string,
+    activeClassName: PropTypes.string,
+    activeLinkClassName: PropTypes.string,
+    previousClassName: PropTypes.string,
+    nextClassName: PropTypes.string,
+    previousLinkClassName: PropTypes.string,
+    nextLinkClassName: PropTypes.string,
+    disabledClassName: PropTypes.string,
+    breakClassName: PropTypes.string,
+    extraAriaContext: PropTypes.string,
   };
 
   static defaultProps = {
-    pageCount             : 10,
-    pageRangeDisplayed    : 2,
-    marginPagesDisplayed  : 3,
-    activeClassName       : "selected",
-    previousClassName     : "previous",
-    nextClassName         : "next",
-    previousLabel         : "Previous",
-    nextLabel             : "Next",
-    breakLabel            : "...",
-    disabledClassName     : "disabled",
-    disableInitialCallback: false
+    pageCount: 10,
+    pageRangeDisplayed: 2,
+    marginPagesDisplayed: 3,
+    activeClassName: 'selected',
+    previousClassName: 'previous',
+    nextClassName: 'next',
+    previousLabel: 'Previous',
+    nextLabel: 'Next',
+    breakLabel: '...',
+    disabledClassName: 'disabled',
+    disableInitialCallback: false,
   };
@@ -56,6 +53,13 @@
 
+    let initialSelected;
+    if (props.initialPage) {
+      initialSelected = props.initialPage;
+    } else if (props.forcePage) {
+      initialSelected = props.forcePage;
+    } else {
+      initialSelected = 0;
+    }
+
     this.state = {
-      selected: props.initialPage ? props.initialPage :
-                props.forcePage   ? props.forcePage :
-                0
+      selected: initialSelected,
     };
@@ -67,3 +71,3 @@ }
     // Call the callback with the initialPage item:
-    if (typeof(initialPage) !== 'undefined' && !disableInitialCallback) {
+    if (typeof initialPage !== 'undefined' && !disableInitialCallback) {
       this.callCallback(initialPage);
@@ -73,5 +77,8 @@ }
 
-  componentWillReceiveProps(nextProps) {
-    if (typeof(nextProps.forcePage) !== 'undefined' && this.props.forcePage !== nextProps.forcePage) {
-      this.setState({selected: nextProps.forcePage});
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (
+      typeof nextProps.forcePage !== 'undefined' &&
+      this.props.forcePage !== nextProps.forcePage
+    ) {
+      this.setState({ selected: nextProps.forcePage });
     }
@@ -103,3 +110,3 @@ }
 
-    this.setState({selected: selected});
+    this.setState({ selected: selected });
 
@@ -132,12 +139,11 @@ // Call the callback with the new selected item:
     this.handlePageSelected(
-      selected < index ?
-        this.getForwardJump() :
-        this.getBackwardJump(),
+      selected < index ? this.getForwardJump() : this.getBackwardJump(),
       evt
     );
-  }
+  };
 
   hrefBuilder(pageIndex) {
     const { hrefBuilder, pageCount } = this.props;
-    if (hrefBuilder &&
+    if (
+      hrefBuilder &&
       pageIndex !== this.state.selected &&
@@ -151,6 +157,8 @@ pageIndex >= 0 &&
 
-  callCallback = (selectedItem) => {
-    if (typeof(this.props.onPageChange) !== "undefined" &&
-        typeof(this.props.onPageChange) === "function") {
-      this.props.onPageChange({selected: selectedItem});
+  callCallback = selectedItem => {
+    if (
+      typeof this.props.onPageChange !== 'undefined' &&
+      typeof this.props.onPageChange === 'function'
+    ) {
+      this.props.onPageChange({ selected: selectedItem });
     }
@@ -166,16 +174,19 @@ };
       activeLinkClassName,
-      extraAriaContext
+      extraAriaContext,
     } = this.props;
 
-    return <PageView
-      key={index}
-      onClick={this.handlePageSelected.bind(null, index)}
-      selected={selected === index}
-      pageClassName={pageClassName}
-      pageLinkClassName={pageLinkClassName}
-      activeClassName={activeClassName}
-      activeLinkClassName={activeLinkClassName}
-      extraAriaContext={extraAriaContext}
-      href={this.hrefBuilder(index)}
-      page={index + 1} />
+    return (
+      <PageView
+        key={index}
+        onClick={this.handlePageSelected.bind(null, index)}
+        selected={selected === index}
+        pageClassName={pageClassName}
+        pageLinkClassName={pageLinkClassName}
+        activeClassName={activeClassName}
+        activeLinkClassName={activeLinkClassName}
+        extraAriaContext={extraAriaContext}
+        href={this.hrefBuilder(index)}
+        page={index + 1}
+      />
+    );
   }
@@ -190,3 +201,3 @@
       breakLabel,
-      breakClassName
+      breakClassName,
     } = this.props;
@@ -197,12 +208,9 @@
     if (pageCount <= pageRangeDisplayed) {
-
       for (let index = 0; index < pageCount; index++) {
         items.push(this.getPageElement(index));
       }
-
     } else {
+      let leftSide = pageRangeDisplayed / 2;
+      let rightSide = pageRangeDisplayed - leftSide;
 
-      let leftSide  = (pageRangeDisplayed / 2);
-      let rightSide = (pageRangeDisplayed - leftSide);
-
       // If the selected page index is on the default right side of the pagination,
@@ -214,6 +222,5 @@ // we consider that the new right side is made up of it (= only one break element).
         rightSide = pageCount - selected;
-        leftSide  = pageRangeDisplayed - rightSide;
-      }
-      else if (selected < pageRangeDisplayed / 2) {
-        leftSide  = selected;
+        leftSide = pageRangeDisplayed - rightSide;
+      } else if (selected < pageRangeDisplayed / 2) {
+        leftSide = selected;
         rightSide = pageRangeDisplayed - leftSide;
@@ -225,6 +232,5 @@ }
       let breakView;
-      let createPageView = (index) => this.getPageElement(index);
+      let createPageView = index => this.getPageElement(index);
 
       for (index = 0; index < pageCount; index++) {
-
         page = index + 1;
@@ -252,3 +258,3 @@
         // part of the pagination).
-        if ((index >= selected - leftSide) && (index <= selected + rightSide)) {
+        if (index >= selected - leftSide && index <= selected + rightSide) {
           items.push(createPageView(index));
@@ -289,3 +295,3 @@ continue;
       nextLinkClassName,
-      nextLabel
+      nextLabel,
     } = this.props;
@@ -295,14 +301,23 @@
 
-    const previousClasses = previousClassName + (selected === 0 ? ` ${disabledClassName}` : '');
-    const nextClasses = nextClassName + (selected === pageCount - 1 ? ` ${disabledClassName}` : '');
+    const previousClasses =
+      previousClassName + (selected === 0 ? ` ${disabledClassName}` : '');
+    const nextClasses =
+      nextClassName +
+      (selected === pageCount - 1 ? ` ${disabledClassName}` : '');
 
+    const previousAriaDisabled = selected === 0 ? 'true' : 'false';
+    const nextAriaDisabled = selected === pageCount - 1 ? 'true' : 'false';
+
     return (
       <ul className={containerClassName}>
         <li className={previousClasses}>
-          <a onClick={this.handlePreviousPage}
-             className={previousLinkClassName}
-             href={this.hrefBuilder(selected - 1)}
-             tabIndex="0"
-             role="button"
-             onKeyPress={this.handlePreviousPage}>
+          <a
+            onClick={this.handlePreviousPage}
+            className={previousLinkClassName}
+            href={this.hrefBuilder(selected - 1)}
+            tabIndex="0"
+            role="button"
+            onKeyPress={this.handlePreviousPage}
+            aria-disabled={previousAriaDisabled}
+          >
             {previousLabel}
@@ -315,8 +330,11 @@ </a>
         <li className={nextClasses}>
-          <a onClick={this.handleNextPage}
-             className={nextLinkClassName}
-             href={this.hrefBuilder(selected + 1)}
-             tabIndex="0"
-             role="button"
-             onKeyPress={this.handleNextPage}>
+          <a
+            onClick={this.handleNextPage}
+            className={nextLinkClassName}
+            href={this.hrefBuilder(selected + 1)}
+            tabIndex="0"
+            role="button"
+            onKeyPress={this.handleNextPage}
+            aria-disabled={nextAriaDisabled}
+          >
             {nextLabel}
@@ -328,2 +346,2 @@ </a>
   }
-};
+}

README.md

@@ -0,0 +0,0 @@ # react-paginate

webpack.config.js

@@ -7,39 +7,39 @@ /* global __dirname */
 module.exports = {
-    entry: path.resolve(dir_js, 'index.js'),
-    output: {
-        path: dir_build,
-        library: 'ReactPaginate',
-        libraryTarget: 'umd',
-        filename: 'react-paginate.js'
-    },
-    devServer: {
-        contentBase: dir_build,
-    },
-    module: {
-        rules: [
-            {
-                use: 'react-hot-loader/webpack',
-                test: dir_js,
-            },
-            {
-                use: 'babel-loader',
-                test: dir_js
-            }
-        ]
-    },
-    externals: [
-        {
-            react: {
-                root: 'React',
-                amd: 'react',
-                commonjs: 'react',
-                commonjs2: 'react'
-            }
-        }
+  entry: path.resolve(dir_js, 'index.js'),
+  output: {
+    path: dir_build,
+    library: 'ReactPaginate',
+    libraryTarget: 'umd',
+    filename: 'react-paginate.js',
+  },
+  devServer: {
+    contentBase: dir_build,
+  },
+  module: {
+    rules: [
+      {
+        use: 'react-hot-loader/webpack',
+        test: dir_js,
+      },
+      {
+        use: 'babel-loader',
+        test: dir_js,
+      },
     ],
-    stats: {
-        colors: true
+  },
+  externals: [
+    {
+      react: {
+        root: 'React',
+        amd: 'react',
+        commonjs: 'react',
+        commonjs2: 'react',
+      },
     },
-    devtool: 'source-map',
-    mode: 'development'
+  ],
+  stats: {
+    colors: true,
+  },
+  devtool: 'source-map',
+  mode: 'development',
 };

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

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

Number of package files

34

increased by3.03%

Lines of code

1987

increased by23.57%

Worsened metrics

Total package byte prevSize

293501

decreased by-45.82%

Dev dependency count

23

increased by35.29%

No dependency changes