@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 nifty nprogress module. It exposes an API that encapsulates the logic of nprogress and renders nothing, giving you complete control over rendering.

Basic Usage

Note: Container, Bar and Spinner are function components that you create. You're free to create and style whatever components suit your context. Refer to the Live Examples to see this approach in action.

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')
)

Live Examples

• Original Design: Source | Sandbox
• React 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