React-useonview NPM

react-useonview

A react hook that returns a ref and does sth. when the element attached to that ref is scrolled into view.

A react hook to trigger afunction when an component is scrolled into view. The given function will also be triggered on every subsequent scroll. So maybe add a closure to prevent this.

Install

npm install --save react-useonview

yarn add react-useonview

Usage

import React, { Component } from 'react';

import useOnView from 'react-useonview';

const App = () => {
  const [visible, setVisible] = useState(false);

  const trigger = useOnView(() => setVisible(true));

  return (
    <div>
      <div style={{ height: '100vh' }}></div>
      <div
        ref={trigger}
        style={{ opacity: visible ? '1' : '0', transition: '1s' }}
      >
        I appear when scrolled into view
      </div>
    </div>
  );
};

notes

the function will probably execute several times
does not care whether the element which has the ref attached is actually visible
also executes when scrolled past element