# position-indicator

> position indicator library

Latest version **0.0.12** (published 2021-05-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install position-indicator
pnpm add position-indicator
yarn add position-indicator
bun add position-indicator
```

## Health

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

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.12 |
| Published | 2021-05-17 |
| First published | 2021-05-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 70.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | kunukn |
| Maintainers | kunukn |
| Keywords | typescript, scroll, position, indicator, library |

## Links

- npm: https://www.npmjs.com/package/position-indicator
- Repository: https://github.com/kunukn/position-indicator
- Homepage: https://github.com/kunukn/position-indicator#readme
- Issues: https://github.com/kunukn/position-indicator/issues
- npm.io page: https://npm.io/package/position-indicator

## Alternatives

- [@openai/codex-sdk](https://npm.io/package/@openai/codex-sdk.md) — 731.4K weekly downloads
- [babel-plugin-transform-react-jsx](https://npm.io/package/babel-plugin-transform-react-jsx.md) — 565.0K weekly downloads
- [babel-helper-remove-or-void](https://npm.io/package/babel-helper-remove-or-void.md) — 508.5K weekly downloads
- [@pnpm/store-controller-types](https://npm.io/package/@pnpm/store-controller-types.md) — 186.9K weekly downloads
- [react-native-signature-canvas](https://npm.io/package/react-native-signature-canvas.md) — 155.6K weekly downloads

## Recent versions

- 0.0.12 (latest) — 2021-05-17
- 0.0.11 — 2021-05-17
- 0.0.10 — 2021-05-16
- 0.0.9 — 2021-05-16
- 0.0.8 — 2021-05-16
- 0.0.7 — 2021-05-15
- 0.0.6 — 2021-05-14
- 0.0.5 — 2021-05-14
- 0.0.4 — 2021-05-14
- 0.0.3 — 2021-05-13
- 0.0.2 — 2021-05-13
- 0.0.1 — 2021-05-13

## README

# Position Indicator

[![npm version](https://img.shields.io/npm/v/position-indicator.svg?style=flat-square)](https://www.npmjs.com/package/position-indicator)
[![npm downloads](https://img.shields.io/npm/dm/position-indicator.svg?style=flat-square)](https://www.npmjs.com/package/position-indicator)
[![License](https://badgen.net/github/license/kunukn/position-indicator)](./LICENSE)
[![Library minified size](https://badgen.net/bundlephobia/min/position-indicator)](https://bundlephobia.com/result?p=position-indicator)
[![Library minified + gzipped size](https://badgen.net/bundlephobia/minzip/position-indicator)](https://bundlephobia.com/result?p=position-indicator)

## About

Minimal VanillaJS code to know the scroll position of the page with no external dependencies.
<br/>

A position indicator that updates on:

- scroll
- resize
- body height change.<br/>

It has been tested on

- Phones (iOS, Android)
- Tablets (iPadOS, Android)
- Laptops (Mac, Windows)
- Modern browsers

It updates when the devices rotates and if the height changes on interaction.

## Browser Support

| ![Chrome](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/70.0.0/chrome/chrome_48x48.png) | ![Safari](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/70.0.0/safari-ios/safari-ios_48x48.png) | ![Firefox](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/70.0.0/firefox/firefox_48x48.png) |
| ---------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------- |
| 60+                                                                                            | 12+                                                                                                    | 60+                                                                                               |

## Demo

<table style="border-spacing: 16px;border-collapse: separate;">

<tr>
<td>Codesandbox React</td>
<td><img width="24" height="24" src="ui-library-logo/React-logo.svg"/></td>
<td><a href="https://0li7c.csb.app/" target="_blank" rel="noopener noreferrer">View</a></td>
<td><a href="https://codesandbox.io/s/position-indicator-reactjs-0li7c" target="_blank" rel="noopener noreferrer">Edit</a></td>
</tr>

<tr>
<td>Codesandbox Vue</td>
<td><img width="24" height="24" src="ui-library-logo/Vue-logo.svg"/></td>
<td><a href="https://88mtz.csb.app/" target="_blank" rel="noopener noreferrer">View</a></td>
<td><a href="https://codesandbox.io/s/angry-night-88mtz" target="_blank" rel="noopener noreferrer">Edit</a></td>
</tr>

<tr>
<td>Codesandbox Angular</td>
<td><img width="24" height="24" src="ui-library-logo/Angular-logo.svg"/></td>
<td><a href="https://jgm6g.csb.app/" target="_blank" rel="noopener noreferrer">View</a></td>
<td><a href="https://codesandbox.io/s/position-indicator-angular-jgm6g" target="_blank" rel="noopener noreferrer">Edit</a></td>
</tr>

<tr>
<td>Codepen Vue</td>
<td><img width="24" height="24" src="ui-library-logo/Vue-logo.svg"/></td>
<td><a href="https://codepen.io/kunukn/full/wvJGzda" target="_blank" rel="noopener noreferrer">View</a></td>
<td><a href="https://codepen.io/kunukn/pen/wvJGzda" target="_blank" rel="noopener noreferrer">Edit</a></td>
</tr>

</table>

## Installation

This library is published in the NPM registry and can be installed using any compatible package manager.

```sh
yarn add position-indicator

# For npm, use the command below.
npm install position-indicator --save
```

### Usage

```js
import { createPositionIndicator } from 'position-indicator'

let myOnInitCallback = (data) => {}
let myOnUpdateCallback = (data) => {}

// where data is:
let data = {
  position /* value between 0 and 1 */,
  prevPosition /* value between 0 and 1 */,
  hasUpdated /* if position is different from previous event */,
  hasScroll /* true or false */,
  eventType /* scroll, resize, heightChange or init */,
  eventDate /* Date.now() */,
}

let positionIndicator = createPositionIndicator({
  onInit: myOnInitCallback,
  onUpdate: myOnUpdateCallback,
  useResizeListener: true, // optional: default true
  useResizeObserver: true, // optional: default true
})

positionIndicator.init()

// Then later when not used anymore
positionIndicator.destroy()
```

### Installation from CDN

This module has an UMD bundle available through JSDelivr and Unpkg CDNs.

```html
<!-- For UNPKG use the code below. -->
<script src="https://unpkg.com/position-indicator"></script>

<!-- For JSDelivr use the code below. -->
<script src="https://cdn.jsdelivr.net/npm/position-indicator"></script>

<script>
  // UMD module is exposed through the "positionIndicator" global variable.
  console.log(positionIndicator)
</script>
```

## Explore the dist files

https://unpkg.com/position-indicator/

## Documentation

[Documentation generated from source files by Typedoc](./docs/README.md).

## License

Released under [MIT License](./LICENSE).

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