📦 use-is-on-screen

useIsOnScreen is a React Hook to check when the component is mounted.

[![build][build-badge]][build] [![version][version-badge]][package] [![MIT License][license-badge]][license] [![downloads][downloads-badge]][npmtrends]

--- ## Table of Contents - [Motivation](#motivation) - [Usage](#usage) - [Contributing](#contributing) - [Bugs and Sugestions](#bugs-and-sugestions) - [License](#license) ## 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`

Single Element Ref

```jsx import useIsOnscreen from 'use-is-on-screen'; function App() { const [isOnScreen, elementRef] = useIsOnscreen(); return ( <>

Box visible: {isOnScreen ? 'YES' : 'NO'}

); } ```

Multiple Element Refs

```jsx import useIsOnscreen from 'use-is-on-screen'; function App() { const [isFirstOnScreen, firstElementRef] = useIsOnscreen(); const [isSecondOnScreen, secondElementRef] = useIsOnscreen(); return ( <>

First box visible: {isFirstOnScreen ? 'YES' : 'NO'}
Second box visible: {isSecondOnScreen ? 'YES' : 'NO'}

); } ```

## 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) [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