# @hanakla/headless-nprogress

> Headless NProgress package

Latest version **1.0.2** (published 2021-01-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install @hanakla/headless-nprogress
pnpm add @hanakla/headless-nprogress
yarn add @hanakla/headless-nprogress
bun add @hanakla/headless-nprogress
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2021-01-14 |
| First published | 2021-01-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 310.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Hanakla |
| Maintainers | hanakla |

## Links

- npm: https://www.npmjs.com/package/@hanakla/headless-nprogress
- Homepage: https://github.com/hanakla/headless-nprogress
- npm.io page: https://npm.io/package/@hanakla/headless-nprogress

## Recent versions

- 1.0.2 (latest) — 2021-01-14
- 1.0.0-beta.7 (beta) — 2021-01-14
- 1.0.1 — 2021-01-14
- 1.0.0 — 2021-01-14
- 1.0.0-beta.6 — 2021-01-14
- 1.0.0-beta.5 — 2021-01-14
- 1.0.0-beta.4 — 2021-01-14
- 1.0.0-beta.3 — 2021-01-14
- 1.0.0-beta.2 — 2021-01-14
- 1.0.0-beta.1 — 2021-01-14

## README

# headless-nprogress

Headless version of [nprogress](https://github.com/rstacruz/nprogress) for any JavaScript apps

```
yarn add @hanakla/headless-nprogress
```

## Usage 

Example with React

```tsx
import { NProgress } from "@hanakla/headless-nprogress"

// some router event handler
router.events.on('routeChangeStart', () => NProgress.start())
router.events.on('routeChangeCompleted', () => NProgress.done())

// in your hooks
const useNProgress = () => {
  const [state, setState] = useState({ progress: 0, visible: false})

  useEffect(() => {
    const callback = (progress, { started, finished }) => {
      setState(state => ({
        progress: progress * 100,
        visible: (state.visible || started) && !finished
      }))
    }

    NProgress.observeChange(callback)
    return () => NProgress.unobserveChange(callback)
  }, [])

  return state
}

const App = () => {
  const {progress, visible} = useNProgress()

  return (
    <div
      role="progressbar"
      aria-valuenow={progress}
      aria-valuemin="0"
      aria-valuemax="100"
      style={{ width: `${progress}%`, opacity: visible ? 1 : 0 }} />
  )
}
```

---
_Source: https://npm.io/package/@hanakla/headless-nprogress · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._