next-rating-component

A all in one solution for exporting array data as excel, pdf and copy to clipboard & print data!

1.0.1
Source
npm

Version published: last month

Weekly downloads: 25; decreased by-65.75%

Maintainers: 0

Weekly downloads

Created: last month

Source

Next App Progress Bar

A next js (app+page) route top progress bar has all the functionality required, including all the features and fixed from earlier packages. Most popular packages are nextjs-toploader and next-nprogress-bar both has some issues. nextjs-toploader do not come with delay time and even they don't want to give this options as it already has a closed PR . On the other hand next-nprogress-bar has a open issue. I just try solve this issues and give the options also.

Small in Size
delay options
Solve for not showing progress bar on first load
Properly Maintained

Installation

$ npm i next-app-progress-bar

App Router

Import AppProgressBar in your app/layout.tsx/js and place inside the body tag.

import { AppProgressBar } from "next-app-progress-bar";

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

`useRouter` hook support

For triggering progress bar in your app folder, please use follow the steps bellow.

//Import `useRouter` from `next-app-progress-bar` instead `next/navigation`.

import { useRouter } from "next-app-progress-bar";

//Then simple use it as like you normally use from `next/navigation`

Page Router

Import PageProgressBar into your pages/_app.tsx/js and place the component on MyApp.

import { PageProgressBar } from 'next-app-progress-bar';

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

For page router you do not handle useRouter separately

Configurations

Name	Description	Type	Default
color	Progress bar color.	string	#2299DD
initialPosition	The progress bar initial position in percentage. For Example - "8/100=8%=0.08"	number	0.08
crawlSpeed	Incremental delay speed in milliseconds.	number	200
speed	Animation speed for the progress bar	number	200
delay	Progress animation start delay	number	0
easing	Animation cubic-bezier setting for speed	string	ease
height	Height of the progress bar in pixels	number	3
crawl	Auto increment for progress bar	boolean	true
showSpinner	Toggle display of top right spinner	boolean	true
shadow	A shadow for the progress bar	string \| false	0 0 10px #2299DD,0 0 5px #2299DD
template	You can use your custom attribute for your progress bar	string
zIndex	You can re-define the `zIndex` for progress bar	number	1600
showAtBottom	To show progress bar on bottom	boolean	false
showForHashAnchor	If you want to show progress bar on hash anchor tag	boolean	true

Stay in touch

Author - Siam Ahnaf
Website - https://www.siamahnaf.com/
Twitter - https://twitter.com/siamahnaf198
Github - https://github.com/siamahnaf

FAQs

What is next-rating-component?

Is next-rating-component popular?

Is next-rating-component well maintained?

Package last updated on 25 Oct 2024

Did you know?

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