redwood-nprogress

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

This component is a fork of next-nprogress-emotion package. It was converted to use with RedwoodJS.

Demo

Installation

yarn add redwood-nprogress

or

npm install redwood-nprogress

Usage

Component

Because this component relies on PageLoadingContext, it needs to be imported under each route.

It is thus recommended to use a layout to wrap each of your pages. For example:

Import the component inside your layouts/GlobalLayout;

import NProgress from 'redwood-nprogress'

const GlobalLayout = ({ children }) => {
  return (
    <>
      <NProgress />
      {children}
    </>
  )
}

export default GlobalLayout

Then wrap your pages in <GlobalLayout>:

import GlobalLayout from 'src/layouts/GlobalLayout/GlobalLayout'

const HomePage = () => {
  return (
    <GlobalLayout>
      {/* page content */}
    </GlobalLayout>
  )
}

export default HomePage

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" />

You can also display a small spinner with the withSpinner prop:

<NProgress withSpinner />

Config

The page loading delay should be configured on Redwood Router itself:

// Routes.js

<Router pageLoadingDelay={300}>...</Router>

You can configure NProgress using its configuration options.

<NProgress
  options={{ trickleSpeed: 50 }}
/>