https://github.com/amorriscode/use-overflow

A React Hook that allows you to detect X and Y overflow
https://github.com/amorriscode/use-overflow

css overflow react react-hooks

Last synced: about 2 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/amorriscode/use-overflow
• Owner: amorriscode
• License: mit
• Created: 2020-05-16T16:57:46.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-04-08T00:48:58.000Z (over 1 year ago)
• Last Synced: 2024-10-15T03:05:31.857Z (about 2 months ago)
• Topics: css, overflow, react, react-hooks
• Language: JavaScript
• Homepage: https://amorriscode.github.io/use-overflow/
• Size: 2.78 MB
• Stars: 28
• Watchers: 3
• Forks: 5
• Open Issues: 11
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• fucking-awesome-react-hooks - `use-overflow`
• awesome-react-hooks-cn - `use-overflow`
• awesome-react-hooks - `use-overflow`
• awesome-react-hooks - `use-overflow`

README

        
# use-overflow

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

[![NPM](https://img.shields.io/npm/v/use-overflow.svg)](https://www.npmjs.com/package/use-overflow) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash

npm install --save use-overflow

OR

yarn add use-overflow

```

## Usage

[Check out the live example](https://amorriscode.github.io/use-overflow/).

```tsx

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 (

    


      {/* Conditional do stuff based on overflow! */}

    

  )

}

```


## License

MIT © [amorriscode](https://github.com/amorriscode)

---

This hook is created using [create-react-hook](https://github.com/hermanya/create-react-hook).