# use-is-on-screen

> React hook to check if an element is on screen

Latest version **0.1.2** (published 2023-03-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install use-is-on-screen
pnpm add use-is-on-screen
yarn add use-is-on-screen
bun add use-is-on-screen
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.2 |
| Published | 2023-03-01 |
| First published | 2023-03-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 9.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Helder B. Berto |
| Maintainers | helderberto |
| Keywords | react, hook, on-screen, is-on-screen |

## Links

- npm: https://www.npmjs.com/package/use-is-on-screen
- npm.io page: https://npm.io/package/use-is-on-screen

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.1.2 (latest) — 2023-03-01
- 0.1.1 — 2023-03-01
- 0.1.0 — 2023-03-01

## README

<div align="center">
  <h1>📦 use-is-on-screen</h1>

  <p><strong>useIsOnScreen is a React Hook</strong> to check when the component is mounted.</p>

<!-- prettier-ignore-start -->
[![build][build-badge]][build]
[![version][version-badge]][package]
[![MIT License][license-badge]][license]
[![downloads][downloads-badge]][npmtrends]
<!-- prettier-ignore-end -->

</div>

---

## Table of Contents

<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->

- [Motivation](#motivation)
- [Usage](#usage)
- [Contributing](#contributing)
- [Bugs and Sugestions](#bugs-and-sugestions)
- [License](#license)

<!-- END doctoc generated TOC please keep comment here to allow auto update -->

## Motivation

- Check when a element is in the viewport
- Use React ref's to get the specific element

## Usage

To start using the `use-is-on-screen` in your project, first install in your project:

`yarn add use-is-on-screen` or `npm install use-is-on-screen`

<details open>
<summary><strong>Single Element Ref</strong></summary>

```jsx
import useIsOnscreen from 'use-is-on-screen';

function App() {
  const [isOnScreen, elementRef] = useIsOnscreen();

  return (
    <>
      <header>Box visible: {isOnScreen ? 'YES' : 'NO'}</header>
      <div className="wrapper">
        <div ref={elementRef} className="box" />
      </div>
    </>
  );
}
```

</details>

<details>
<summary><strong>Multiple Element Refs</strong></summary>

```jsx
import useIsOnscreen from 'use-is-on-screen';

function App() {
  const [isFirstOnScreen, firstElementRef] = useIsOnscreen();
  const [isSecondOnScreen, secondElementRef] = useIsOnscreen();

  return (
    <>
      <header>
        First box visible: {isFirstOnScreen ? 'YES' : 'NO'}
        <br />
        Second box visible: {isSecondOnScreen ? 'YES' : 'NO'}
      </header>
      <div className="wrapper">
        <div ref={firstElementRef} className="first box" />
        <div ref={secondElementRef} className="second box" />
      </div>
    </>
  );
}
```

</details>

## Contributing

Please read [CONTRIBUTING.md](CONTRIBUTING.md) for details on our code of conduct, and the process for submitting pull requests to us.

## Bugs and Sugestions

Report bugs or do suggestions using the [issues](https://github.com/helderberto/use-is-on-screen/issues).

## License

[MIT License](LICENSE) © [helderberto](https://helderberto.com)

<!-- prettier-ignore-start -->
[version-badge]: https://img.shields.io/npm/v/use-is-on-screen.svg?style=flat-square
[package]: https://www.npmjs.com/package/use-is-on-screen
[downloads-badge]: https://img.shields.io/npm/dm/use-is-on-screen.svg?style=flat-square
[npmtrends]: http://www.npmtrends.com/use-is-on-screen
[license-badge]: https://img.shields.io/npm/l/use-is-on-screen.svg?style=flat-square
[license]: https://github.com/helderberto/use-is-on-screen/blob/master/LICENSE
[build]: https://github.com/helderberto/use-is-on-screen/actions
[build-badge]: https://github.com/helderberto/use-is-on-screen/actions/workflows/ci.yml/badge.svg
<!-- prettier-ignore-end -->

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