Skip to content

Commit 2211740

Browse files
ndungtsendungtse
committedJun 29, 2023
[release]: first release v0.1.0
·
v1.2.2v0.1.0
1 parent 1e66286 commit 2211740

30 files changed

+387
-227
lines changed
 

‎.eslintignore

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
2+
dist/

‎.eslintrc

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
{
2+
"plugins": ["@typescript-eslint"],
3+
"extends": [
4+
"eslint:recommended",
5+
"plugin:@typescript-eslint/eslint-recommended",
6+
"plugin:@typescript-eslint/recommended"
7+
],
8+
"rules": {
9+
"quotes": ["error", "single"],
10+
"semi": ["error", "always"],
11+
"eol-last": ["error", "always"],
12+
"comma-dangle": [
13+
"error",
14+
{
15+
"arrays": "always-multiline",
16+
"objects": "always-multiline",
17+
"imports": "always-multiline",
18+
"exports": "always-multiline",
19+
"functions": "never"
20+
}
21+
],
22+
"arrow-parens": ["error", "always"],
23+
"no-trailing-spaces": ["error", { "skipBlankLines": true }],
24+
"prefer-const": "warn",
25+
"accessor-pairs": "off",
26+
"no-async-promise-executor": "off",
27+
"no-unused-vars": "off",
28+
"node/no-missing-require": "off",
29+
"no-console": "warn"
30+
}
31+
}

‎.github/problemMatchers/eslint.json

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"problemMatcher": [
3+
{
4+
"owner": "eslint-stylish",
5+
"pattern": [
6+
{
7+
"regexp": "^([^\\s].*)$",
8+
"file": 1
9+
},
10+
{
11+
"regexp": "^\\s+(\\d+):(\\d+)\\s+(error|warning|info)\\s+(.*)\\s\\s+(.*)$",
12+
"line": 1,
13+
"column": 2,
14+
"severity": 3,
15+
"message": 4,
16+
"code": 5,
17+
"loop": true
18+
}
19+
]
20+
}
21+
]
22+
}

‎.github/problemMatchers/tsc.json

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{
2+
"problemMatcher": [
3+
{
4+
"owner": "tsc",
5+
"pattern": [
6+
{
7+
"regexp": "^(?:\\s+\\d+\\>)?([^\\s].*)\\((\\d+|\\d+,\\d+|\\d+,\\d+,\\d+,\\d+)\\)\\s*:\\s+(error|warning|info)\\s+(\\w{1,2}\\d+)\\s*:\\s*(.*)$",
8+
"file": 1,
9+
"location": 2,
10+
"severity": 3,
11+
"code": 4,
12+
"message": 5
13+
}
14+
]
15+
}
16+
]
17+
}

‎.github/workflows/continuous-integration.yml

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
name: Continuous Integration
2+
3+
on:
4+
push:
5+
branches:
6+
- master
7+
pull_request:
8+
9+
jobs:
10+
Linting:
11+
name: Linting
12+
runs-on: ubuntu-latest
13+
steps:
14+
- name: Checkout Project
15+
uses: actions/checkout@2541b1294d2704b0964813337f33b291d3f8596b # tag=v3
16+
- name: Add problem matcher
17+
run: echo "::add-matcher::.github/problemMatchers/eslint.json"
18+
- name: Use Node.js v16
19+
uses: actions/setup-node@2fddd8803e2f5c9604345a0b591c3020ee971a93 # tag=v3
20+
with:
21+
node-version: 16
22+
cache: yarn
23+
registry-url: https://registry.npmjs.org/
24+
- name: Install Dependencies
25+
run: yarn --frozen-lockfile
26+
- name: Run ESLint
27+
run: yarn lint --fix=false
28+
29+
Building:
30+
name: Compile source code
31+
runs-on: ubuntu-latest
32+
steps:
33+
- name: Checkout Project
34+
uses: actions/checkout@2541b1294d2704b0964813337f33b291d3f8596b # tag=v3
35+
- name: Add problem matcher
36+
run: echo "::add-matcher::.github/problemMatchers/tsc.json"
37+
- name: Use Node.js v16
38+
uses: actions/setup-node@eeb10cff27034e7acf239c5d29f62154018672fd # tag=v3
39+
with:
40+
node-version: 16
41+
cache: yarn
42+
registry-url: https://registry.npmjs.org/
43+
- name: Install Dependencies
44+
run: yarn --frozen-lockfile
45+
- name: Typecheck And Build Code
46+
run: yarn typecheck && yarn build

‎.gitignore

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
# next.js build output
1313
.next
1414

15-
*node_modules
15+
node_modules
1616
.idea
1717
.DS_Store
1818
dist

‎.prettierrc

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"printWidth": 120,
3+
"singleQuote": true,
4+
"quoteProps": "as-needed",
5+
"endOfLine": "lf"
6+
}

‎.vscode/settings.json

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"editor.defaultFormatter": "esbenp.prettier-vscode",
3+
"editor.formatOnSave": true
4+
}

‎CHANGELOG.md

-41
Original file line numberDiff line numberDiff line change
@@ -1,42 +1 @@
11
# Changelogs
2-
3-
## v0.0.16
4-
5-
- Use `React.memo` for better performance
6-
- Allow passing custom css tag in props
7-
8-
## v0.0.15
9-
10-
- Properly handle `routeChangeError` event
11-
12-
## v0.0.14
13-
14-
### Added
15-
16-
- Added nonce support
17-
- Added autocomplete for advanced options
18-
19-
## v0.0.13
20-
21-
### Fixed
22-
23-
- Fixed react version issue
24-
25-
## v0.0.12
26-
27-
### Updated
28-
29-
- Updated README.md's 'How to use' section to be more clear and consise. Also added further context to Default Config.
30-
- Updated Next.js version to v12
31-
32-
## v0.0.11
33-
34-
### Added
35-
36-
- Added next.js version 11.0.0 in package.json `peerDependancies`.
37-
- Added color highlight to the code in the README.md file.
38-
- Added type of showOnShallow of NextNProgress class in `index.d.ts`.
39-
40-
### Updated
41-
42-
- Upgraded the `next` version to 11.0.0 in `devDependencies`.

‎LICENSE

+1-1
Original file line numberDiff line numberDiff line change
@@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
1818
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
1919
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
2020
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21-
SOFTWARE.
21+
SOFTWARE.

‎README.md

+59-22
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,75 @@
1-
# Next.js Progressbar
1+
# Next.js 13 Progressbar
22

3-
A simple Next.js progressbar component using [NProgress](http://ricostacruz.com/nprogress/).
3+
A simple Next.js progressbar component using [NProgress](http://ricostacruz.com/nprogress/) with support of next.js 13 app dir.
44

5-
> [I've created this Blog to help you create your own progressbar](https://gosink.in/next-js-make-your-own-progress-bar-indicator-component-easily/)
5+
<!-- > [I've created this Blog to help you create your own progressbar](https://gosink.in/next-js-make-your-own-progress-bar-indicator-component-easily/) -->
66

7-
**Demo**: [https://demo-nextjs-progressbar.vercel.app](https://demo-nextjs-progressbar.vercel.app/)
7+
**Demo**: [https://demo-next13-progressbar.vercel.app](https://demo-next13-progressbar.vercel.app/)
88

99
## How to install?
1010

1111
```bash
12-
npm i nextjs-progressbar
12+
npm i next13-progressbar
1313
```
1414

1515
## How to use?
1616

17-
After installing the package, import `NextNProgress` in your `pages/_app.js` file:
17+
After installing the package, create `providers.tsx` file in app directory to handle contexts and mark it `use client`. see [contexts in app dir](https://nextjs.org/docs/getting-started/react-essentials#context) and import `NProvider;
1818

19-
```js
20-
import NextNProgress from 'nextjs-progressbar';
19+
```jsx
20+
'use client';
21+
import React from 'react';
22+
import { NProvider } from 'next13-progressbar';
23+
24+
const Providers = ({ children }: { children: React.ReactNode }) => {
25+
return <NProvider color="#fff">{children}</NProvider>;
26+
};
27+
28+
export default Providers;
2129
```
2230

23-
And for rendering add `<NextNProgress />` to your `return()` in `MyApp()`:
31+
Wrap your providers in `layout.tsx/js`
2432

25-
```js
26-
import NextNProgress from 'nextjs-progressbar';
33+
```jsx
34+
import Providers from './providers';
2735

28-
export default function MyApp({ Component, pageProps }) {
36+
export default function RootLayout({ children }: { children: React.ReactNode }) {
2937
return (
30-
<>
31-
<NextNProgress />
32-
<Component {...pageProps} />;
33-
</>
38+
<html lang="en">
39+
<body className={inter.className}>
40+
<Providers>{children}</Providers>
41+
</body>
42+
</html>
3443
);
3544
}
3645
```
3746

47+
Use `Link` component form `next13-progressbar` in your entire app instead of native `next/link` to navigate with progressbar
48+
49+
```jsx
50+
'use client';
51+
import { Link } from 'next13-progressbar';
52+
53+
export default function NavBar() {
54+
return (
55+
<div className="navbar">
56+
<Link href={'/'}>Home</Link>
57+
<Link href={'/about'}>About</Link>
58+
<Link href={'/contact'}>Contact</Link>
59+
</div>
60+
);
61+
}
62+
```
63+
64+
And you are done. You can now customize you progress bar as you need!
65+
⚠️ Note: You must use `Link` component inside client components only.
66+
3867
### Default Config
3968

40-
If no props are passed to `<NextNProgress />`, below is the default configuration applied.
69+
If no props are passed to `<NProvider />`, below is the default configuration applied.
4170

4271
```jsx
43-
<NextNProgress color="#29D" startPosition={0.3} stopDelayMs={200} height={3} showOnShallow={true} />
72+
<NProvider color="#29D" startPosition={0.3} stopDelayMs={200} height={3} showOnShallow={true} />
4473
```
4574

4675
- `color`: to change the default color of progressbar. You can also use `rgb(,,)` or `rgba(,,,)`.
@@ -53,10 +82,10 @@ If no props are passed to `<NextNProgress />`, below is the default configuratio
5382

5483
#### Adding nonce
5584

56-
We use internal css in this package. If you are using csp, you can add nonce to the `<style>` tag by providing `nonce` prop to `<NextNProgress />` component.
85+
We use internal css in this package. If you are using csp, you can add nonce to the `<style>` tag by providing `nonce` prop to `<NProvider />` component.
5786

5887
```jsx
59-
<NextNProgress nonce="my-nonce" />
88+
<NProvider nonce="my-nonce" />
6089
```
6190

6291
#### Custom CSS
@@ -65,7 +94,7 @@ You can use `transformCSS` prop to pass custom css.
6594
**Note:** You must return a `JSX.Element` from the function.
6695

6796
```jsx
68-
<NextNProgress
97+
<NProvider
6998
transformCSS={(css) => {
7099
// css is the default css string. You can modify it and return it or return your own css.
71100
return <style>{css}</style>;
@@ -78,5 +107,13 @@ You can use `transformCSS` prop to pass custom css.
78107
You can use [other configurations](https://github.com/rstacruz/nprogress#configuration) which NProgress provides by adding a JSON in `options` props.
79108

80109
```jsx
81-
<NextNProgress options={{ easing: 'ease', speed: 500 }} />
110+
<NProvider options={{ easing: 'ease', speed: 500 }} />
82111
```
112+
113+
## Contributing
114+
115+
Any Contribution of any kind are appreciated. You can start by forking this repository and make your changes then submit a pull request
116+
117+
## Author
118+
119+
- [Ndungutse Charles](https://github.com/NdungutseCharles103)

‎example/package.json

+3
Original file line numberDiff line numberDiff line change
@@ -19,5 +19,8 @@
1919
"react": "18.2.0",
2020
"react-dom": "18.2.0",
2121
"typescript": "5.1.5"
22+
},
23+
"devDependencies": {
24+
"husky": "^8.0.3"
2225
}
2326
}

‎example/src/app/about/page.tsx

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import React from 'react';
2+
3+
const AboutPage = () => {
4+
return <div>AboutPage</div>;
5+
};
6+
7+
export default AboutPage;

‎example/src/app/contact/page.tsx

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import React from 'react';
2+
3+
const ContactPage = () => {
4+
return <div>ContactPage</div>;
5+
};
6+
7+
export default ContactPage;

0 commit comments

Comments
 (0)
Please sign in to comment.