Nascent Personality Manifestation

    @tanem/react-nprogress
    TypeScript icon, indicating that this package has built-in type declarations

    4.0.3 • Public • Published

    react-nprogress

    npm version build status coverage status npm downloads minzipped size

    A React primitive for building slim progress bars.

    Background | Usage | Live Examples | API | Installation | License

    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

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

    Live Examples

    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.

    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}
    />

    Installation

    $ 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:

    License

    MIT

    Install

    npm i @tanem/react-nprogress

    DownloadsWeekly Downloads

    22,001

    Version

    4.0.3

    License

    MIT

    Unpacked Size

    170 kB

    Total Files

    26

    Last publish

    Collaborators

    • tanem