🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more

react-use-rect

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install
r

react-use-rect

Hook that measures element boundaries

1.1.4
Version published
Weekly downloads
1.8K
-2.09%
Maintainers
1
Weekly downloads
 
Created
Issues
7

react-use-rect

The hook that measures a DOM element boundaries (DOMRect).

It responds to a target element size change, window resize, parent elements scroll and transition ends as well.

Get started

npm install react-use-rect
import React from 'react';
import { useRect } from 'react-use-rect';

function Component() {
  const [ref, rect] = useRect();
  return <div ref={ref} />;
}

Options

useRect({ scroll: true, transitionEnd: true });

scroll

default: false

If enabled, it will respond to scroll changes.

NOTE: Please, use this option only if you're sure you intend to update an element boundaries on it's parents scroll. Ubiquitous usage of this option can have a negative impact on scroll performance.

transitionEnd

default: false

If enabled, it will respond to transition ends.

Keywords

FAQs

Package last updated on 03 May 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts