Merge pull request #62 from ansu5555/fix/multiple-pdf-render

Fix multiple pdf render & render failure on rapid page change

Author: ansu5555

.eslintrc.js

@@ -19,10 +19,11 @@ module.exports = {
     plugins: ['react', 'prettier'],
     rules: {
         'prettier/prettier': 'error',
+        'arrow-parens': [2, 'as-needed'],
     },
     settings: {
         react: {
-            version: 'detect',
+            version: '>=16.8.6',
         },
     },
 }

.stylelintrc.js

@@ -0,0 +1,8 @@
+module.exports = {
+    extends: ['stylelint-config-recommended'],
+    rules: {
+        indentation: 2,
+        'max-empty-lines': 2,
+        'no-empty-first-line': true,
+    },
+}

README.md

@@ -12,6 +12,8 @@ Every element can be styled upon your preferences using default classes your own
 
 Initially it was forked from [mgr-pdf-viewer-react](https://github.com/MGrin/mgr-pdf-viewer-react)
 
+### Hit the :star: in gihub if you like it
+
 ### Example: Live demo is available [here](https://ansu5555.github.io/pdf-viewer-reactjs/)
 
 # How to install

dist/pdf-viewer-reactjs.js

@@ -1,59 +1,59 @@
 .customViewer {
-    border-color: #fa5b35;
-    border-width: 1px;
-    border-style: solid;
+  border-color: #fa5b35;
+  border-width: 1px;
+  border-style: solid;
 }
 .customCanvas {
-    height: 500px;
-    max-height: 500px;
-    min-width: 500px;
-    max-width: 500px;
-    overflow: auto;
+  height: 500px;
+  max-height: 500px;
+  min-width: 500px;
+  max-width: 500px;
+  overflow: auto;
 }
 .customPrevBtn {
-    cursor: pointer;
-    display: inline-block;
-    margin: 0;
-    width: auto;
-    color: #fa5b35;
-    background-color: #f3f3f3;
-    border-color: #fa5b35;
-    border-width: 1px;
-    border-style: solid;
-    border-radius: 6px;
+  cursor: pointer;
+  display: inline-block;
+  margin: 0;
+  width: auto;
+  color: #fa5b35;
+  background-color: #f3f3f3;
+  border-color: #fa5b35;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 6px;
 }
 .customNextBtn {
-    cursor: pointer;
-    display: inline-block;
-    margin: 0;
-    width: auto;
-    color: #fa5b35;
-    background-color: #f3f3f3;
-    border-color: #333333;
-    border-width: 1px;
-    border-style: solid;
-    border-radius: 6px;
+  cursor: pointer;
+  display: inline-block;
+  margin: 0;
+  width: auto;
+  color: #fa5b35;
+  background-color: #f3f3f3;
+  border-color: #333333;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 6px;
 }
 .customResetBtn {
-    cursor: pointer;
-    display: inline-block;
-    margin: 0;
-    width: auto;
-    color: #45fa35;
-    background-color: #f3f3f3;
-    border-color: #45fa35;
-    border-width: 1px;
-    border-style: solid;
-    border-radius: 6px;
+  cursor: pointer;
+  display: inline-block;
+  margin: 0;
+  width: auto;
+  color: #45fa35;
+  background-color: #f3f3f3;
+  border-color: #45fa35;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 6px;
 }
 .customPages {
-    font-size: medium;
-    margin: 0.5rem;
+  font-size: medium;
+  margin: 0.5rem;
 }
 .customWrapper {
-    height: 40px;
-    font-size: 24px;
-    padding: 12px;
-    padding-bottom: 0;
-    background-color: #fff;
+  height: 40px;
+  font-size: 24px;
+  padding: 12px;
+  padding-bottom: 0;
+  background-color: #fff;
 }

example/package-lock.json

@@ -1,6 +1,6 @@
 body {
-    margin: 0;
-    padding: 0;
-    font-family: sans-serif;
-    background-color: #fafafa;
+  margin: 0;
+  padding: 0;
+  font-family: sans-serif;
+  background-color: #fafafa;
 }