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: 2 days 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 (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-01-05T18:05:09.000Z (over 1 year ago)
• Last Synced: 2024-06-13T05:46:20.501Z (21 days 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

Lists

• 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

```