Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including redwood-nprogress with all npm packages installed. Try it out:

require("@emotion/core/package.json"); // @emotion/core is a peer dependency. require("@redwoodjs/router/package.json"); // @redwoodjs/router is a peer dependency. require("react/package.json"); // react is a peer dependency. require("react-dom/package.json"); // react-dom is a peer dependency. var redwoodNprogress = require("redwood-nprogress")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

redwood-nprogress v1.0.1

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

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.

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

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free