next-nprogress-emotion
TypeScript icon, indicating that this package has built-in type declarations

2.0.0 • Public • Published

next-nprogress-emotion

Theme aware NProgress component to use in Next.js apps using Emotion or ThemeUI.

This component borrows heavily from the next-nprogress package. It was refactored to fix this issue.

The original component was converted into a functional component using TypeScript and Emotion. It is theme aware so can be used with ThemeUI, or with any valid css color.

Installation

yarn add next-nprogress-emotion

or

npm install next-nprogress-emotion

Usage

Component

Import it inside your pages/_app.js;

import NProgress from 'next-nprogress-emotion';

Render the component in your custom App container:

<NProgress />

If you're using ThemeUI, that's all you need to do. The component will use the primary color by default.

You can change the color using a theme color or any css color:

// using a theme color
<NProgress color="accent" />
// using css
<NProgress color="#fff" />

Advanced Config

You can configure NProgress using its configuration options.

<NProgress
  color="#29d"
  options={{ trickleSpeed: 50 }}
  showAfterMs={300}
  spinner
/>

Difference between v1 and v2

Use v1 if you're using @emotion/core@^10 and v2 if you're using @emotion/react@^11.

Package Sidebar

Install

npm i next-nprogress-emotion

Weekly Downloads

166

Version

2.0.0

License

MIT

Unpacked Size

36.1 kB

Total Files

13

Last publish

Collaborators

  • freddydumont