Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/tanem/react-nprogress

:hourglass: A React primitive for building slim progress bars.
https://github.com/tanem/react-nprogress

animation component higher-order-component hoc hook hooks javascript loading nprogress progress progress-bar progressbar react render-props spinner typescript

Last synced: 3 days ago
JSON representation

:hourglass: A React primitive for building slim progress bars.

Host: GitHub
URL: https://github.com/tanem/react-nprogress
Owner: tanem
License: mit
Created: 2018-09-30T17:28:01.000Z (over 6 years ago)
Default Branch: master
Last Pushed: 2024-10-29T04:21:20.000Z (3 months ago)
Last Synced: 2024-10-30T00:35:23.487Z (3 months ago)
Topics: animation, component, higher-order-component, hoc, hook, hooks, javascript, loading, nprogress, progress, progress-bar, progressbar, react, render-props, spinner, typescript
Language: TypeScript
Homepage: https://npm.im/@tanem/react-nprogress
Size: 24.1 MB
Stars: 436
Watchers: 3
Forks: 19
Open Issues: 2
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
- Authors: AUTHORS

Awesome Lists containing this project

README

        # react-nprogress

[![npm version](https://img.shields.io/npm/v/@tanem/react-nprogress.svg?style=flat-square)](https://www.npmjs.com/package/@tanem/react-nprogress)

[![build status](https://img.shields.io/github/actions/workflow/status/tanem/react-nprogress/ci.yml?style=flat-square)](https://github.com/tanem/react-nprogress/actions?query=workflow%3ACI)

[![coverage status](https://img.shields.io/codecov/c/github/tanem/react-nprogress.svg?style=flat-square)](https://codecov.io/gh/tanem/react-nprogress)

[![npm downloads](https://img.shields.io/npm/dm/@tanem/react-nprogress.svg?style=flat-square)](https://www.npmjs.com/package/@tanem/react-nprogress)

[![minzipped size](https://img.shields.io/bundlephobia/minzip/@tanem/react-nprogress?style=flat-square)](https://bundlephobia.com/result?p=@tanem/react-nprogress)

> A React primitive for building slim progress bars.

[Background](#background) | [Usage](#usage) | [Live Examples](#live-examples) | [API](#api) | [Installation](#installation) | [License](#license)

## Background

This is a React port of [rstacruz](https://github.com/rstacruz)'s [`nprogress`](https://github.com/rstacruz/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**

```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(, document.getElementById('root'))

```

## Live Examples

- HOC: [Source](https://github.com/tanem/react-nprogress/tree/master/examples/hoc) | [Sandbox](https://codesandbox.io/s/github/tanem/react-nprogress/tree/master/examples/hoc)

- Material UI: [Source](https://github.com/tanem/react-nprogress/tree/master/examples/material-ui) | [Sandbox](https://codesandbox.io/s/github/tanem/react-nprogress/tree/master/examples/material-ui)

- Multiple Instances: [Source](https://github.com/tanem/react-nprogress/tree/master/examples/multiple-instances) | [Sandbox](https://codesandbox.io/s/github/tanem/react-nprogress/tree/master/examples/multiple-instances)

- Next Pages Router: [Source](https://github.com/tanem/react-nprogress/tree/master/examples/next-pages-router) | [Sandbox](https://codesandbox.io/s/github/tanem/react-nprogress/tree/master/examples/next-pages-router)

- Original Design: [Source](https://github.com/tanem/react-nprogress/tree/master/examples/original-design) | [Sandbox](https://codesandbox.io/s/github/tanem/react-nprogress/tree/master/examples/original-design)

- Plain JS: [Source](https://github.com/tanem/react-nprogress/tree/master/examples/plain-js) | [Sandbox](https://codesandbox.io/s/github/tanem/react-nprogress/tree/master/examples/plain-js)

- Reach Router: [Source](https://github.com/tanem/react-nprogress/tree/master/examples/reach-router) | [Sandbox](https://codesandbox.io/s/github/tanem/react-nprogress/tree/master/examples/reach-router)

- React Router V5: [Source](https://github.com/tanem/react-nprogress/tree/master/examples/react-router-v5) | [Sandbox](https://codesandbox.io/s/github/tanem/react-nprogress/tree/master/examples/react-router-v5)

- React Router V6: [Source](https://github.com/tanem/react-nprogress/tree/master/examples/react-router-v6) | [Sandbox](https://codesandbox.io/s/github/tanem/react-nprogress/tree/master/examples/react-router-v6)

- Render Props: [Source](https://github.com/tanem/react-nprogress/tree/master/examples/render-props) | [Sandbox](https://codesandbox.io/s/github/tanem/react-nprogress/tree/master/examples/render-props)

- UMD Build (Development): [Source](https://github.com/tanem/react-nprogress/tree/master/examples/umd-dev) | [Sandbox](https://codesandbox.io/s/github/tanem/react-nprogress/tree/master/examples/umd-dev)

- UMD Build (Production): [Source](https://github.com/tanem/react-nprogress/tree/master/examples/umd-prod) | [Sandbox](https://codesandbox.io/s/github/tanem/react-nprogress/tree/master/examples/umd-prod)

## 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**

```jsx

const Progress = ({

  animationDuration,

  incrementDuration,

  isAnimating,

  minimum

}) => {

  const { isFinished, progress } = useNProgress({

    animationDuration,

    incrementDuration,

    isAnimating,

    minimum

  })

  return (

    

      

      

    

  )

}

```

**Render Props Example**

```jsx

  {({ animationDuration, isFinished, progress }) => (

    

      

      

    

  )}

```

**HOC Example**

```jsx

const Inner = ({ animationDuration, isFinished, progress }) => (

  

    

    

  

)

const Enhanced = withNProgress(Inner)

```

## Installation

```

$ npm install @tanem/react-nprogress

```

There are also UMD builds available via [unpkg](https://unpkg.com/):

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

- [`React`](https://unpkg.com/react/umd/react.development.js)

- [`ReactDOM`](https://unpkg.com/react-dom/umd/react-dom.development.js)

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

- [`React`](https://unpkg.com/react/umd/react.production.min.js)

- [`ReactDOM`](https://unpkg.com/react-dom/umd/react-dom.production.min.js)

## License

MIT