use-overflow

A React Hook that allows you to detect X and Y overflow.

Install

npm install --save use-overflow
OR
yarn add use-overflow

Usage

Check out the live example.

import * as React from 'react'

import { useOverflow } from 'use-overflow'

const Example = () => {
  const horizontalRef = React.useRef(null);
  const { refXOverflowing, refXScrollBegin, refXScrollEnd } = useOverflow(horizontalRef);

  const verticalRef = React.useRef(null);
  const { refYOverflowing, refYScrollBegin, refYScrollEnd } = useOverflow(verticalRef);

  return (
    <div>
      {/* Conditional do stuff based on overflow! */}
    </div>
  )
}

License

MIT © amorriscode

This hook is created using create-react-hook.