update docs and cd

Author: TheSGJ

.github/workflows/jsr-deploy.yml renamed to .github/workflows/build-deploy.yml

@@ -1,28 +1,19 @@
-name: Publish
+name: Publish nextjs-toploader to npmjs & jsr.io
 on:
-  pull_request:
-    branches:
-      - jsr
-
+  release:
+    types: [published]
 jobs:
-  publish:
-    name: Build & Deploy for JSR.io
+  build:
     runs-on: ubuntu-latest
 
     permissions:
-      contents: read
+      contents: write
       id-token: write
 
     steps:
       - name: Checkout Repository
         uses: actions/checkout@v4
 
-      - name: Delete Current README.md
-        run: rm README.md
-
-      - name: Modify README for JSR.io
-        run: mv JSR.md README.md
-
       - name: Find yarn cache location
         id: yarn-cache
         run: echo "::set-output name=dir::$(yarn cache dir)"
@@ -38,14 +29,33 @@ jobs:
       - name: Install Dependencies
         run: yarn install
 
-      - name: Generate Types Manually using TSUP
+      - name: Compile the Library
         run: yarn build-lib
+      # Setup .npmrc file to publish to npm
+      - name: Setup the node
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20.11.1'
+          registry-url: 'https://registry.npmjs.org'
+      - name: Publish nextjs-toploader on npm
+        run: npm publish --access public --provenance
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+      - name: Checkout Repository
+        uses: actions/checkout@v4
+
+      - name: Delete Current README.md
+        run: rm README.md
+
+      - name: Modify README for JSR.io
+        run: mv JSR.md README.md
 
       - name: Move index.d.ts in src directory for JSR
         run: cp dist/index.d.ts src/
 
       - name: Add Use Client line
-        run: sed -i '16s/^/\"use client\";/' src/index.tsx
+        run: sed -i '1s/^/\"use client\";/' src/index.tsx
 
       - name: Install Deno
         run: curl -fsSL https://deno.land/install.sh | sh

.github/workflows/npm-publish.yml

@@ -126,3 +126,10 @@
 ### Fixed
 
 - Fix npm-publish.yml for gh actions to publish with provenance
+
+## v1.6.11
+
+### Fixed
+
+- Fix to add use client in jsr usage with nextjs
+- Update README about support for React

CHANGELOG.md

@@ -4,6 +4,7 @@
 
 [![NPM](https://img.shields.io/badge/NPM-%23CB3837.svg?style=for-the-badge&logo=npm&logoColor=white)](https://www.npmjs.com/package/nextjs-toploader)
 [![NPM Downloads](https://img.shields.io/npm/dm/nextjs-toploader?&style=flat-square)](https://www.npmjs.com/package/nextjs-toploader)
+[![JSR](https://jsr.io/badges/@thesgj/nextjs-toploader)](https://jsr.io/badges/@thesgj/nextjs-toploader)
 
 For using npm package manager instead see: (https://www.npmjs.com/package/nextjs-toploader)
 
@@ -73,19 +74,18 @@ export default function MyApp({ Component, pageProps }) {
 
 ### Usage with React, Vite React or any other React based component
 
-For rendering add `<NextTopLoader />` to your `return()` inside the <Router><Router/> component in `App()`:
+For rendering add `<NextTopLoader />` to your `return()` inside the <Router><Router/> component in `App()` in your App.js:
+
 
 ```js
-import NextTopLoader from 'nextjs-toploader';
+import NextTopLoader from '@thesgj/nextjs-toploader';
 const App = () => {
   return (
     <div>
     <Router>
-      <NextTopLoader color='red' showSpinner={false} />
+      <NextTopLoader />
     <Routes>
-    <Route path="/" element={<Home />} />
-    <Route path="/about" element={<About />} />
-    <Route path="*" element={<NotFound/>} />
+    {/* Your Routes Here */}
     </Routes>
     </Router>
     </div>

JSR.md

@@ -1,6 +1,6 @@
 # Next Js TopLoader
 
-- A Next.js Top Loading Bar component made using nprogress, works with Next.js 14.
+- A Next.js Top Loading Bar component made using nprogress, works with Next.js 14 and React.
 
 [![NPM](https://img.shields.io/badge/NPM-%23CB3837.svg?style=for-the-badge&logo=npm&logoColor=white)](https://www.npmjs.com/package/nextjs-toploader)
 [![NPM Downloads](https://img.shields.io/npm/dm/nextjs-toploader?&style=flat-square)](https://www.npmjs.com/package/nextjs-toploader)
@@ -63,6 +63,28 @@ export default function MyApp({ Component, pageProps }) {
 }
 ```
 
+### Usage with React, Vite React or any other React based component
+
+For rendering add `<NextTopLoader />` to your `return()` inside the <Router><Router/> component in `App()` in your App.js:
+
+```js
+import NextTopLoader from 'nextjs-toploader';
+const App = () => {
+  return (
+    <div>
+    <Router>
+      <NextTopLoader />
+    <Routes>
+    {/* Your Routes Here */}
+    </Routes>
+    </Router>
+    </div>
+  )
+}
+
+export default App;
+```
+
 ### Default Configuration
 
 If no props are passed to `<NextTopLoader />`, below is the default configuration applied.

README.md

@@ -1,6 +1,6 @@
 {
   "name": "@thesgj/nextjs-toploader",
-  "version": "1.6.10",
+  "version": "1.6.11",
   "exports": "./src/index.tsx",
   "compilerOptions": {
     "jsx": "react-jsx",

deno.json

@@ -1,7 +1,7 @@
 {
   "name": "nextjs-toploader",
-  "version": "1.6.10",
-  "description": "A Next.js Top Loading Bar component made using nprogress, works with Next.js 14.",
+  "version": "1.6.11",
+  "description": "A Next.js Top Loading Bar component made using nprogress, works with Next.js 14 and React.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {