react-useonview

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

or

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

Api

Parameter in order	Description
doSth	function that is executed when ref-element scrolled in or past view
fullView	should the object be in fullview to trigger doSth

options

name	values	default	description
fullView	boolean	false	should doSth be triggered at first contact or when the element is in full view?

License

MIT © JustinHorn