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.

• next-nprogress-emotion
  • Installation
  • Usage
    • Component
    • Advanced Config
  • Difference between v1 and v2

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.