Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
react-resize-aware
Advanced tools
Readme
It does one thing, it does it well: listens to resize events on any HTML element.
react-resize-aware
is a zero dependency, ~600 bytes React Hook you can use to detect resize events without relying on intervals, loops, DOM manipulation detection or CSS redraws.
It takes advantage of the resize
event on the HTMLObjectElement
, works on any browser I know of, and it's super lightweight.
In addition, it doesn't directly alters the DOM, everything is handled by React.
Looking for the 2.0 docs? Click here
yarn add react-resize-aware
or with npm:
npm install --save react-resize-aware
The API is simple yet powerful, the useResizeAware
Hook
returns a React node you will place inside the measured element, and an object containing its sizes:
import React from "react";
import useResizeAware from "react-resize-aware";
const App = () => {
const [resizeListener, sizes] = useResizeAware();
return (
<div style={{ position: "relative" }}>
{resizeListener}
Your content here. (div sizes are {sizes?.width} x {sizes?.height})
</div>
);
};
Heads up!: Make sure to assign a
position != initial
to the HTMLElement you want to target (relative
,absolute
, orfixed
will work).
The Hook returns an array with two elements inside:
[resizeListener, ...]
(first element)This is an invisible React node that must be placed as direct-child of the HTMLElement you want to listen the resize events of.
The node is not going to interfer with your layouts, I promise.
[..., sizes]
(second element)This object contains the width
and height
properties, it could be null
if the element is not yet rendered.
reporter
You can customize the properties of the sizes
object by passing a custom reporter
function as first argument of useResizeAware
.
const customReporter = (target: ?HTMLIFrameElement) => ({
clientWidth: target != null ? target.clientWidth : 0,
});
const [resizeListener, sizes] = useResizeAware(customReporter);
return (
<div style={{ position: "relative" }}>
{resizeListener}
Your content here. (div clientWidth is {sizes.clientWidth})
</div>
);
The above example will report the clientWidth
rather than the default offsetWidth
and offsetHeight
.
For completeness, below you can find an example to show how to make your code react to size variations using React Hooks:
const App = () => {
const [resizeListener, sizes] = useResizeAware();
React.useEffect(() => {
console.log("Do something with the new size values");
}, [sizes.width, sizes.height]);
return (
<div style={{ position: "relative" }}>
{resizeListener}
Your content here.
</div>
);
};
FAQs
A React hook that makes it possible to listen to element resize events.
The npm package react-resize-aware receives a total of 25,079 weekly downloads. As such, react-resize-aware popularity was classified as popular.
We found that react-resize-aware demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
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.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.