:hourglass: A React primitive for building slim progress bars.
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, giving you complete control over rendering.
In the following examples, Container
, Bar
and Spinner
are custom components.
Hook
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 (
<Container animationDuration={animationDuration} isFinished={isFinished}>
<Bar animationDuration={animationDuration} progress={progress} />
<Spinner />
</Container>
)
}
render(<Progress isAnimating />, document.getElementById('root'))
Render Props
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(
<NProgress isAnimating>
{({ animationDuration, isFinished, progress }) => (
<Container animationDuration={animationDuration} isFinished={isFinished}>
<Bar animationDuration={animationDuration} progress={progress} />
<Spinner />
</Container>
)}
</NProgress>,
document.getElementById('root')
)
HOC
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 }) => (
<Container animationDuration={animationDuration} isFinished={isFinished}>
<Bar animationDuration={animationDuration} progress={progress} />
<Spinner />
</Container>
)
const Enhanced = withNProgress(Inner)
render(<Enhanced isAnimating />, document.getElementById('root'))
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
const Progress = ({
animationDuration,
incrementDuration,
isAnimating,
minimum
}) => {
const { isFinished, progress } = useNProgress({
animationDuration,
incrementDuration,
isAnimating,
minimum
})
return (
<Container animationDuration={animationDuration} isFinished={isFinished}>
<Bar animationDuration={animationDuration} progress={progress} />
<Spinner />
</Container>
)
}
<Progress
animationDuration={300}
incrementDuration={500}
isAnimating
minimum={0.1}
/>
Render Props Example
<NProgress
animationDuration={300}
incrementDuration={500}
isAnimating
minimum={0.1}
>
{({ animationDuration, isFinished, progress }) => (
<Container animationDuration={animationDuration} isFinished={isFinished}>
<Bar animationDuration={animationDuration} progress={progress} />
<Spinner />
</Container>
)}
</NProgress>
HOC Example
const Inner = ({ animationDuration, isFinished, progress }) => (
<Container animationDuration={animationDuration} isFinished={isFinished}>
<Bar animationDuration={animationDuration} progress={progress} />
<Spinner />
</Container>
)
const Enhanced = withNProgress(Inner)
<Enhanced
animationDuration={300}
incrementDuration={500}
isAnimating
minimum={0.1}
/>
$ npm install @tanem/react-nprogress
There are also UMD builds available via unpkg:
For the non-minified development version, make sure you have already included:
For the minified production version, make sure you have already included:
MIT