redwood-nprogress
v1.0.1
Published
Theme aware NProgress component to use in RedwoodJS apps using Emotion or ThemeUI.
Downloads
12
Maintainers
Readme
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 }}
/>