📦 use-is-on-screen

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

---

Table of Contents

• Motivation
• Usage
• Contributing
• Bugs and Sugestions
• 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

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>
    </>
  );
}

Multiple Element Refs

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>
    </>
  );
}

Contributing

Please read 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.

License

MIT License © helderberto