beeinger / next-progress Goto Github PK

View Code? Open in Web Editor NEW

40.0 2.0 6.0 305 KB

NextJS NProgress implementation

Home Page: https://www.npmjs.com/package/next-progress

JavaScript 9.42% TypeScript 90.58%

nextjs nprogress progress-bar progress progressbar jsx styled-components typescript

next-progress's Introduction

next-progress

No hassle Next.js - NProgress integration

Fully configurable & easy to use

🚀 Demo

🔌 Setup

it's so quick

✅ Install

yarn add next-progress

npm install --save next-progress

✅ Import

Important❗️ It has to be done in your custom App - pages/_app[.js / .jsx / .ts / .tsx]

import NextProgress from "next-progress";

✅ Use

Anywhere in your custom App's return statement

<NextProgress />

🌟 Example pages\_app

Tip: This example is in typescript, if you use javascript then just remove the types.

import type { AppProps } from "next/app";
import Head from "next/head";
import NextProgress from "next-progress";

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <meta name="theme-color" content="#000000" />
        <meta name="description" content="Lorem Ipsum..." />
        <title>Example</title>
      </Head>
      {
        //
        // Can be placed anywhere in the return statement
        //
      }
      <NextProgress delay={300} options={{ showSpinner: false }} />
      {
        //
        //
        //
      }
      <Layout>
        <Component {...pageProps} />
      </Layout>
    </>
  );
}

⚙️ Docs - Options

📐 height

Height of the progress bar.

default = "2px"

🌈 color

Color of the progress bar.

default = "#29D"

🐢 delay

Delay of the animation - when page loads faster than the delay time progress bar won't be displayed.

default = 0

♻️ disableSameRoute

If true, progress bar won't be displayed when user travels the same route they're currently on.

default = false

⚙️ options

Options for - NProgress.configure(options).

See NProgress docs

default = undefined

👠 customGlobalCss

Css Custom NProgress styles - must be provided as a string that will go inside the <style jsx> tag.

Warning: color param won't work as you should set the color yourself inside custom css.

default = undefined

next-progress's People

Contributors

Stargazers

Watchers

Forkers

ahmad4hat ammar-oker thousand-sky tomradford heanfig shawngustaw

next-progress's Issues

Do not show progress bar when clicking on link to current route

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch [email protected] for the project I'm working on.

If we click on a link pointing to the current route, the NProgress bar will show up. This change is so that we do not show the bar if we click, and it points to the current route.

Here is the diff that solved my problem:

diff --git a/node_modules/next-progress/dist/index.js b/node_modules/next-progress/dist/index.js
index 84150e5..707f645 100644
--- a/node_modules/next-progress/dist/index.js
+++ b/node_modules/next-progress/dist/index.js
@@ -26,7 +26,8 @@ var NextProgress = React__default["default"].memo(function (_a) {
     React.useEffect(function () {
         options && NProgress__default["default"].configure(options);
         var timeout;
-        var start = function () {
+        var start = function (e) {
+            if(e === Router.route) return null;
             return (timeout = setTimeout(function () { return NProgress__default["default"].start(); }, delay));
         }, done = function () {
             clearTimeout(timeout);

This issue body was partially generated by patch-package.

Ship with minified CSS inside the <style> tag

I have noticed the CSS for next-progress adds <style> with unminified styles. It could be great to have it minified with removed comments. Some small amount of bytes could be saved :)

Next js - Hydration Failed

When using inside of Next js 13, it will cause this error:
Cannot render a <style> outside the main document without knowing its precedence and a unique href key. React can hoist and deduplicate <style> tags if you provide a precedenceprop along with anhrefprop that does not conflic with thehrefvalues used in any other hoisted <style> or <link rel="stylesheet" ...> tags. Note that hoisting <style> tags is considered an advanced feature that most will not use directly. Consider moving the <style> tag to the <head> or consider adding aprecedence="default"andhref="some unique resource identifier", or move the <style> to the <style> tag.

Release process

First off, pretty cool component! Pretty much just what I was looking for and a bit more!

However I'm hesitant to bring in into my project because I'll be unable to review upgrades, since versions aren't tagged in GitHub & there's no changelog.

I strongly suggest getting set up with something like semantic-release to automate the release process (including updating version number according to semver, generating changelog, publishing to npm, creating release on GitHub) and deliver valuable info to package consumers.

It's pretty easy to set up with GitHub Actions.. you can see my recent commit for an example, though the GitHub Actions yml is a bit complex due to having multiple jobs, which you might just combine into one. The GITHUB_TOKEN is set automatically by GitHub. The NPM_TOKEN you need to generate with the npm cli and save it to your "Secrets" for this repo on GitHub.

The component sc-global-dAvrxo has been created dynamically.
You may see this warning because you've called styled inside another component.
To resolve this only create new StyledComponents outside of any render method and function component.

Actually What is the problem. Here I am using styled component with material-ui(mui)

<CacheProvider value={emotionCache}>
      <Head>
        <meta name="viewport" content="initial-scale=1, width=device-width" />
      </Head>
      <ThemeProvider theme={theme}>
        <CssBaseline />
        <NextProgress
          delay={400}
          options={{ showSpinner: false }}
          height="1.5px"
          color="#0EA102"
        />
        <Component {...pageProps} />
      </ThemeProvider>
 </CacheProvider>

Here I am calling next progress by this away. Can you help me with removing this warning?

Build fails on Vercel

Local builds work fine, but when deploying on Vercel, build fails with following error:

Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error
Error: Minified React error #321; visit https://reactjs.org/docs/error-decoder.html?invariant=321 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at S (/vercel/path0/node_modules/next-progress/node_modules/react/cjs/react.production.min.js:18:327)
    at Object.exports.useEffect (/vercel/path0/node_modules/next-progress/node_modules/react/cjs/react.production.min.js:22:364)
    at /vercel/path0/node_modules/next-progress/dist/index.js:46:11
    at d (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:33:498)
    at bb (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:36:16)
    at a.b.render (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:42:43)
    at a.b.read (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:41:83)
    at exports.renderToString (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:52:138)
    at renderPage (/vercel/path0/node_modules/next/dist/next-server/server/render.js:54:854)
    at Object.ctx.renderPage (/vercel/path0/.next/server/pages/_document.js:1099:26)