Theme aware NProgress component to use in Next.js apps using Emotion or ThemeUI.
npm install next-nprogress-emotionTheme 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
``bash`
yarn add next-nprogress-emotion
or
`bash`
npm install next-nprogress-emotion
Import it inside your pages/_app.js;
`js`
import NProgress from 'next-nprogress-emotion';
Render the component in your custom App container:
`jsx`
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 configure NProgress using its configuration options.
`jsx`
options={{ trickleSpeed: 50 }}
showAfterMs={300}
spinner
/>
Use v1 if you're using @emotion/core@^10 and v2 if you're using @emotion/react@^11`.