UNPKG

@acusti/use-is-out-of-bounds

Version:

React hook that detects if an element is outside of its parent’s bounds on any of its sides (like collision detection)

github.com/acusti/uikit/tree/main/packages/use-is-out-of-bounds

acusti/uikit

14 lines (11 loc) • 1.07 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
# @acusti/use-is-out-of-bounds [![latest version](https://img.shields.io/npm/v/@acusti/use-is-out-of-bounds?style=for-the-badge)](https://www.npmjs.com/package/@acusti/use-is-out-of-bounds) [![maintenance status](https://img.shields.io/npms-io/maintenance-score/@acusti/use-is-out-of-bounds?style=for-the-badge)](https://npms.io/search?q=%40acusti%2Fuse-is-out-of-bounds) [![downloads per month](https://img.shields.io/npm/dm/@acusti/use-is-out-of-bounds?style=for-the-badge)](https://www.npmjs.com/package/@acusti/use-is-out-of-bounds) [![bundle size](https://deno.bundlejs.com/badge?q=@acusti/use-is-out-of-bounds)](https://bundlejs.com/?q=%40acusti%2Fuse-is-out-of-bounds) `useIsOutOfBounds` is a React hook that returns a `{ bottom: boolean, left: boolean, right: boolean, top: boolean, hasLayout: boolean }` object for the passed-in element. The `hasLayout` value represents whether the element has been laid out yet (i.e. if the browser has computed the reflow), while the side values indicate whether an element is outside of its parent’s bounds on that side.