Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/freddydumont/redwood-nprogress
Theme aware NProgress component to use in RedwoodJS apps using Emotion or ThemeUI.
https://github.com/freddydumont/redwood-nprogress
emotion loading nprogress progress-bar react redwood redwoodjs spinner theme-ui
Last synced: about 2 months ago
JSON representation
Theme aware NProgress component to use in RedwoodJS apps using Emotion or ThemeUI.
- Host: GitHub
- URL: https://github.com/freddydumont/redwood-nprogress
- Owner: freddydumont
- License: mit
- Created: 2020-03-31T16:02:45.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T18:05:09.000Z (about 2 years ago)
- Last Synced: 2024-10-13T08:51:23.763Z (3 months ago)
- Topics: emotion, loading, nprogress, progress-bar, react, redwood, redwoodjs, spinner, theme-ui
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/redwood-nprogress
- Size: 2.6 MB
- Stars: 5
- Watchers: 3
- Forks: 0
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-redwood - nprogress
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`](https://github.com/freddydumont/next-nprogress-emotion/) package. It was converted to use with RedwoodJS.
## Demo
![GIF Demo](.github/redwood-nprogress.gif)
## Installation
```bash
yarn add redwood-nprogress
```or
```bash
npm install redwood-nprogress
```## Usage
### Component
Because this component relies on [`PageLoadingContext`](https://redwoodjs.com/docs/redwood-router#pageloadingcontext), it needs to be imported __under each route__.
It is thus recommended to use a [`layout`](https://redwoodjs.com/tutorial/layouts) 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
```
### Config
The [page loading delay](https://redwoodjs.com/docs/redwood-router#pageloadingcontext) should be configured on Redwood Router itself:
```javascript
// Routes.js...
```You can configure NProgress using its [configuration options](https://github.com/rstacruz/nprogress#configuration).
```jsx
```