npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@sklinet/nextjs-progressbar

v0.0.17

Published

Nprogress component for Next.js app.

Downloads

4

Readme

Next.js Progressbar

A simple Next.js progressbar component using NProgress.

I've created this Blog to help you create your own progressbar

Demo: https://demo-nextjs-progressbar.vercel.app

How to install?

npm i nextjs-progressbar

How to use?

After installing the package, import NextNProgress in your pages/_app.js file:

import NextNProgress from 'nextjs-progressbar';

And for rendering add <NextNProgress /> to your return() in MyApp():

import NextNProgress from 'nextjs-progressbar';

export default function MyApp({ Component, pageProps }) {
  return (
    <>
      <NextNProgress />
      <Component {...pageProps} />;
    </>
  );
}

Default Config

If no props are passed to <NextNProgress />, below is the default configuration applied.

<NextNProgress color="#29D" startPosition={0.3} stopDelayMs={200} height={3} showOnShallow={true} />
  • color: to change the default color of progressbar. You can also use rgb(,,) or rgba(,,,).
  • startPosition: to set the default starting position : 0.3 = 30%.
  • stopDelayMs: time for delay to stop progressbar in ms.
  • height: height of progressbar in px.
  • showOnShallow: You can choose whether you want the progressbar to be displayed if you're using shallow routing. It takes a boolean. Learn more about shallow routing in Next.js docs.

Advanced Config

Adding nonce

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.

<NextNProgress nonce="my-nonce" />

Custom CSS

You can use transformCSS prop to pass custom css. Note: You must return a JSX.Element from the function.

<NextNProgress
  transformCSS={(css) => {
    // css is the default css string. You can modify it and return it or return your own css.
    return <style>{css}</style>;
  }}
/>

Other Configs

You can use other configurations which NProgress provides by adding a JSON in options props.

<NextNProgress options={{ easing: 'ease', speed: 500 }} />