Theme aware NProgress component to use in RedwoodJS apps using Emotion or ThemeUI.
npm install redwood-nprogressTheme 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.
``bash`
yarn add redwood-nprogress
or
`bash`
npm install redwood-nprogress
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;
`js
import NProgress from 'redwood-nprogress'
const GlobalLayout = ({ children }) => {
return (
<>
{children}
)
}
export default GlobalLayout
`
Then wrap your pages in :
`javascript
import GlobalLayout from 'src/layouts/GlobalLayout/GlobalLayout'
const HomePage = () => {
return (
{/ page content /}
)
}
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:
`jsx`
// using a theme color
`jsx`
// using css
You can also display a small spinner with the withSpinner prop:
`jsx`
The page loading delay should be configured on Redwood Router itself:
`javascript
// Routes.js
`
You can configure NProgress using its configuration options.
`jsx``
/>