@tanem/react-nprogress

react-nprogress

A React primitive for building slim progress bars inspired by Google, YouTube, and Medium.

Background

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.

Usage

import Bar from './Bar'
import Container from './Container'
import NProgress from '@tanem/react-nprogress';
import React from 'react'
import Spinner from './Spinner'
import { render } from 'react-dom'

render(
  <NProgress isAnimating>
    {({ isFinished, progress, animationDuration }) => (
      <Container isFinished={isFinished} animationDuration={animationDuration}>
        <Bar progress={progress} animationDuration={animationDuration} />
        <Spinner />
      </Container>
    )}
  </NProgress>,
  document.getElementById('root')
)

Container, Bar and Spinner are custom components. NProgress is the only component exposed by this package. It doesn't render anything itself, it just calls the render function and renders that:

<NProgress>
  {({/* parameters here */}) => (/* your render code here */)}
</NProgress>

Live Examples

• Original Design: Source | Sandbox
• React Router: Source | Sandbox
• Reach Router: Source | Sandbox
• Next Router: Source | Sandbox
• UMD Build (Development): Source | Sandbox
• UMD Build (Production): Source | Sandbox

API

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.

Example

<NProgress
  animationDuration={300}
  incrementDuration={500}
  isAnimating
  minimum={0.1}
>
  {({ isFinished, progress, animationDuration }) => (
    <Container isFinished={isFinished} animationDuration={animationDuration}>
      <Bar progress={progress} animationDuration={animationDuration} />
      <Spinner />
    </Container>
  )}
</NProgress>

Installation

$ npm install @tanem/react-nprogress

There are also UMD builds available via unpkg:

• https://unpkg.com/@tanem/react-nprogress/umd/react-nprogress.development.js
• https://unpkg.com/@tanem/react-nprogress/umd/react-nprogress.production.min.js

For the non-minified development version, make sure you have already included:

• React
• ReactDOM
• PropTypes

For the minified production version, make sure you have already included:

• React
• ReactDOM

License

MIT

Changelog

v1.0.13 (2018-10-28)

Full Changelog

:question: Unlabelled

• #26 Update example docs (@tanem)