Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

next-nprogress-bar

Package Overview
Dependencies
Maintainers
1
Versions
38
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

next-nprogress-bar

NextJS progress bar compatible with new app directory

  • 1.2.3
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
64K
increased by7.55%
Maintainers
1
Weekly downloads
 
Created
Source

Next NProgress bar

NProgress integration on Next.js compatible with /app and /pages folders

Table of Contents

Getting started

Install

npm install next-nprogress-bar

or

yarn add next-nprogress-bar

Import

Import it into your /pages/_app(.js/.jsx/.ts/.tsx) or /app/layout(.js/.jsx/.ts/.tsx) folder

import ProgressBar from 'next-nprogress-bar';

Use

<ProgressBar />

Exemple with /pages/_app

JavaScript

import ProgressBar from 'next-nprogress-bar';

export default function App({ Component, pageProps }) {
  return (
    <>
      <Component {...pageProps} />
      <ProgressBar
        height="4px"
        color="#fffd00"
        options={{ showSpinner: false }}
        shallowRouting
      />
    </>
  );
}

TypeScript

import type { AppProps } from 'next/app';
import ProgressBar from 'next-nprogress-bar';

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Component {...pageProps} />
      <ProgressBar
        height="4px"
        color="#fffd00"
        options={{ showSpinner: false }}
        shallowRouting
      />
    </>
  );
}

Exemple with /app/layout

JavaScript

First approach in a use client layout
// In /app/layout.jsx
'use client';

import ProgressBar from 'next-nprogress-bar';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <ProgressBar
          height="4px"
          color="#fffd00"
          options={{ showSpinner: false }}
          shallowRouting
          appDirectory
        />
      </body>
    </html>
  );
}
Second approach wrap in a use client Providers component

See Next.js documentation

// Create a Providers component to wrap your application with all the components requiring 'use client', such as next-nprogress-bar or your different contexts...
'use client';

import ProgressBar from 'next-nprogress-bar';

const Providers = ({ children }) => {
  return (
    <>
      {children}
      <ProgressBar
        height="4px"
        color="#fffd00"
        options={{ showSpinner: false }}
        shallowRouting
        appDirectory
      />
    </>
  );
};

export default Providers;

// Import and use it in /app/layout.jsx
import Providers from './providers';

export const metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}

TypeScript

First approach in a use client layout
// In /app/layout.tsx
'use client';

import ProgressBar from 'next-nprogress-bar';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        {children}
        <ProgressBar
          height="4px"
          color="#fffd00"
          options={{ showSpinner: false }}
          shallowRouting
          appDirectory
        />
      </body>
    </html>
  );
}
Second approach wrap in a use client Providers component

See Next.js documentation

// Create a Providers component to wrap your application with all the components requiring 'use client', such as next-nprogress-bar or your different contexts...
'use client';

import ProgressBar from 'next-nprogress-bar';

const Providers = ({ children }: { children: React.ReactNode }) => {
  return (
    <>
      {children}
      <ProgressBar
        height="4px"
        color="#fffd00"
        options={{ showSpinner: false }}
        shallowRouting
        appDirectory
      />
    </>
  );
};

export default Providers;

// Import and use it in /app/layout.tsx
import Providers from './providers';

export const metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}

Props

height optional - string

Height of the progress bar - by default 2px

color optional - string

Color of the progress bar - by default #0A2FFF

options optional - NProgressOptions

by default undefined

See NProgress docs

appDirectory optional - boolean

If your are in the new /app directory - by default false

shallowRouting optional - boolean

If the progress bar is not displayed when you use shallow routing - by default false

See Next.js docs

delay optional - number

When the page loads faster than the progress bar, it does not display - by default 0

style optional - string

Your custom CSS - by default NProgress CSS

Issues

Please file an issue for bugs, missing documentation, or unexpected behavior.

File an issue

LICENSE

MIT

Keywords

FAQs

Package last updated on 20 Jun 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc