v1.1.1, Used React.memo

Author: TheSGJ

.github/FUNDING.yml

@@ -0,0 +1,3 @@
+# These are supported funding platforms
+
+github: thesgj

CHANGELOG.md

@@ -4,11 +4,25 @@
 
 ### Added
 
-- Added next.js version 13.2.3 in package.json `peerDependancies`.
-- Initialized and Added added propTypes in NextTopLoader, Support for Next.js v13.2.3
+- Added next.js version 13.2.3 in package.json `peerDependancies`
+- Initialized and added propTypes in NextTopLoader, Support for Next.js v13.2.3
 
 ## v1.0.1
 
 ### Updated
 
 - Fixed misspelled Component name in README, added more instructions for the Component for the usage with `layout.js` in `app` folder structure
+
+## v1.1.1
+
+### Added
+
+- Used `React.memo` for better performance
+
+### Fixed
+
+- Fix spelling for `NextTopLoadersProps` to `NextTopLoaderProps`
+
+### Updated
+
+- Removed unwanted `devDependancies` to reduce the package size

README.md

@@ -85,3 +85,5 @@ If no props are passed to `<NextTopLoader />`, below is the default configuratio
 - `height`: height of TopLoader in `px`.
 - `crawl`: auto increamenting behaviour for the TopLoader.
 - `showSpinner`: to show spinner or not.
+
+After passing the props reload the next.js server once in the browser, to see changes for `<NextTopLoader />` ( This is because NextTopLoader uses built-in history api in browser for indicating progress )

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nextjs-toploader",
-  "version": "1.0.1",
+  "version": "1.1.1",
   "description": "A Next.js Top Loading Bar component made using nprogress, works with Next.js 13.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -37,10 +37,7 @@
     "dist/**/*.d*"
   ],
   "devDependencies": {
-    "@types/eslint": "^8",
     "@types/node": "^18.14.6",
-    "@types/prettier": "^2",
-    "@types/prop-types": "^15",
     "@types/react": "^18",
     "@typescript-eslint/eslint-plugin": "^5.54.0",
     "@typescript-eslint/parser": "^5.54.0",

src/index.tsx

@@ -1,16 +1,17 @@
-/* eslint-disable no-useless-escape */
-/* eslint-disable quotes */
 /**
  *
  * NextTopLoader
  *
  */
 
+/* eslint-disable no-useless-escape */
+/* eslint-disable quotes */
+
 import Script from 'next/script';
 import * as PropTypes from 'prop-types';
 import * as React from 'react';
 
-export interface NextTopLoadersProps {
+export interface NextTopLoaderProps {
   /**
    * Color for the TopLoader.
    * @default "#29d"
@@ -52,7 +53,8 @@ export interface NextTopLoadersProps {
    */
   speed?: number;
 }
-export default function NextTopLoader(props: NextTopLoadersProps) {
+
+const NextTopLoader = (props: NextTopLoaderProps) => {
   const color = '#29d';
   const height = 3;
   return (
@@ -121,7 +123,8 @@ export default function NextTopLoader(props: NextTopLoadersProps) {
       </Script>
     </>
   );
-}
+};
+export default React.memo(NextTopLoader);
 
 NextTopLoader.propTypes = {
   color: PropTypes.string,

yarn.lock

@@ -376,24 +376,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/eslint@npm:^8":
-  version: 8.21.1
-  resolution: "@types/eslint@npm:8.21.1"
-  dependencies:
-    "@types/estree": "*"
-    "@types/json-schema": "*"
-  checksum: 584068441e4000c7b41c8928274fdcc737bc62f564928c30eb64ec41bbdbac31612f9fedaf490bceab31ec8305e99615166428188ea345d58878394683086fae
-  languageName: node
-  linkType: hard
-
-"@types/estree@npm:*":
-  version: 1.0.0
-  resolution: "@types/estree@npm:1.0.0"
-  checksum: 910d97fb7092c6738d30a7430ae4786a38542023c6302b95d46f49420b797f21619cdde11fa92b338366268795884111c2eb10356e4bd2c8ad5b92941e9e6443
-  languageName: node
-  linkType: hard
-
-"@types/json-schema@npm:*, @types/json-schema@npm:^7.0.9":
+"@types/json-schema@npm:^7.0.9":
   version: 7.0.11
   resolution: "@types/json-schema@npm:7.0.11"
   checksum: 527bddfe62db9012fccd7627794bd4c71beb77601861055d87e3ee464f2217c85fca7a4b56ae677478367bbd248dbde13553312b7d4dbc702a2f2bbf60c4018d
@@ -407,14 +390,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/prettier@npm:^2":
-  version: 2.7.2
-  resolution: "@types/prettier@npm:2.7.2"
-  checksum: b47d76a5252265f8d25dd2fe2a5a61dc43ba0e6a96ffdd00c594cb4fd74c1982c2e346497e3472805d97915407a09423804cc2110a0b8e1b22cffcab246479b7
-  languageName: node
-  linkType: hard
-
-"@types/prop-types@npm:*, @types/prop-types@npm:^15":
+"@types/prop-types@npm:*":
   version: 15.7.5
   resolution: "@types/prop-types@npm:15.7.5"
   checksum: 5b43b8b15415e1f298243165f1d44390403bb2bd42e662bca3b5b5633fdd39c938e91b7fce3a9483699db0f7a715d08cef220c121f723a634972fdf596aec980
@@ -2093,10 +2069,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "nextjs-toploader@workspace:."
   dependencies:
-    "@types/eslint": ^8
     "@types/node": ^18.14.6
-    "@types/prettier": ^2
-    "@types/prop-types": ^15
     "@types/react": ^18
     "@typescript-eslint/eslint-plugin": ^5.54.0
     "@typescript-eslint/parser": ^5.54.0