A React primitive for building slim progress bars.
npm install @tanem/react-nprogress
> A React primitive for building slim progress bars.
Background | Usage | Live Examples | API | Installation | License
This is a React port of rstacruz's nprogress module. It exposes an API that encapsulates the logic of nprogress and renders nothing, allowing consumers to implement their own rendering.
In the following examples, Container, Bar and Spinner are custom components.
Hook
``jsx
import { useNProgress } from '@tanem/react-nprogress'
import React from 'react'
import { render } from 'react-dom'
import Bar from './Bar'
import Container from './Container'
import Spinner from './Spinner'
const Progress = ({ isAnimating }) => {
const { animationDuration, isFinished, progress } = useNProgress({
isAnimating,
})
return (
)
}
render(, document.getElementById('root'))
`
Render Props
`jsx
import { NProgress } from '@tanem/react-nprogress'
import React from 'react'
import { render } from 'react-dom'
import Bar from './Bar'
import Container from './Container'
import Spinner from './Spinner'
render(
{({ animationDuration, isFinished, progress }) => (
)}
document.getElementById('root')
)
`
HOC
`jsx
import { withNProgress } from '@tanem/react-nprogress'
import React from 'react'
import { render } from 'react-dom'
import Bar from './Bar'
import Container from './Container'
import Spinner from './Spinner'
const Inner = ({ animationDuration, isFinished, progress }) => (
)
const Enhanced = withNProgress(Inner)
render(
`
- HOC: Source | Sandbox
- Material UI: Source | Sandbox
- Multiple Instances: Source | Sandbox
- Next Pages Router: Source | Sandbox
- Original Design: Source | Sandbox
- Plain JS: Source | Sandbox
- Reach Router: Source | Sandbox
- React Router V5: Source | Sandbox
- React Router V6: Source | Sandbox
- Render Props: Source | Sandbox
- UMD Build (Development): Source | Sandbox
- UMD Build (Production): Source | Sandbox
Props
- animationDuration - _Optional_ Number indicating the animation duration in ms. Defaults to 200.incrementDuration
- - _Optional_ Number indicating the length of time between progress bar increments in ms. Defaults to 800.isAnimating
- - _Optional_ Boolean indicating if the progress bar is animating. Defaults to false.minimum
- - _Optional_ Number between 0 and 1 indicating the minimum value of the progress bar. Defaults to 0.08.
Hook Example
`jsx
const Progress = ({
animationDuration,
incrementDuration,
isAnimating,
minimum
}) => {
const { isFinished, progress } = useNProgress({
animationDuration,
incrementDuration,
isAnimating,
minimum
})
return (
)
}
incrementDuration={500}
isAnimating
minimum={0.1}
/>
`
Render Props Example
`jsx`
incrementDuration={500}
isAnimating
minimum={0.1}
>
{({ animationDuration, isFinished, progress }) => (
)}
HOC Example
`jsx
const Inner = ({ animationDuration, isFinished, progress }) => (
)
const Enhanced = withNProgress(Inner)
incrementDuration={500}
isAnimating
minimum={0.1}
/>
`
`
$ npm install @tanem/react-nprogress
UMD builds are also available for use with pre-React 19 via unpkg:
- https://unpkg.com/@tanem/react-nprogress/dist/react-nprogress.umd.development.js
- https://unpkg.com/@tanem/react-nprogress/dist/react-nprogress.umd.production.js
For the non-minified development version, make sure you have already included:
For the minified production version, make sure you have already included:
MIT