Numerous Problems Multiplied
Miss any of our Open RFC calls?Watch the recordings here! »

detect-element-overflow

1.2.0 • Public • Published

downloads build dependencies dev dependencies tested with jest

Detect-Element-Overflow

A function that tells you whether a given element is overflowing its container or not. Useful for creating dropdowns and tooltips.

tl;dr

  • Install by executing npm install detect-element-overflow or yarn add detect-element-overflow.
  • Import by adding import detectElementOverflow from 'detect-element-overflow'.
  • Do stuff with it!
    const collisions = detectElementOverflow(child, parent);

User guide

Detect-Element-Overflow returns an object with getter functions described below.

Attribute name Description Example values
collidedTop Whether or not child element collided with the top parent's border. true
collidedBottom Whether or not child element collided with the bottom parent's border. true
collidedLeft Whether or not child element collided with the left parent's border. true
collidedRight Whether or not child element collided with the left parent's border. true
overflowTop How many pixels of child have crossed top parent's border. Negative values specify how many pixels are between the child and the top parent's border. 20, -15
overflowBottom How many pixels of child have crossed bottom parent's border. Negative values specify how many pixels are between the child and the bottom parent's border. 20, -15
overflowLeft How many pixels of child have crossed left parent's border. Negative values specify how many pixels are between the child and the left parent's border. 20, -15
overflowRight How many pixels of child have crossed right parent's border. Negative values specify how many pixels are between the child and the right parent's border. 20, -15

License

The MIT License.

Author

Wojciech Maj
kontakt@wojtekmaj.pl
http://wojtekmaj.pl

Install

npm i detect-element-overflow

DownloadsWeekly Downloads

54,802

Version

1.2.0

License

MIT

Unpacked Size

7.91 kB

Total Files

11

Last publish

Collaborators

  • avatar