Security News
JavaScript Leaders Demand Oracle Release the JavaScript Trademark
In an open letter, JavaScript community leaders urge Oracle to give up the JavaScript trademark, arguing that it has been effectively abandoned through nonuse.
react-measure
Advanced tools
The react-measure package is a React component that allows you to measure the dimensions and position of a DOM element. It provides a declarative way to get the size and position of elements, which can be useful for responsive design, animations, and other dynamic UI behaviors.
Measure Dimensions
This feature allows you to measure the width and height of a DOM element. The `Measure` component wraps around the element you want to measure, and the `onResize` callback updates the state with the new dimensions whenever the element is resized.
import React from 'react';
import Measure from 'react-measure';
class MyComponent extends React.Component {
state = {
dimensions: {
width: -1,
height: -1
}
};
render() {
return (
<Measure
bounds
onResize={(contentRect) => {
this.setState({ dimensions: contentRect.bounds });
}}
>
{({ measureRef }) => (
<div ref={measureRef} style={{ width: '100%' }}>
<p>The width of this element is {this.state.dimensions.width}px</p>
<p>The height of this element is {this.state.dimensions.height}px</p>
</div>
)}
</Measure>
);
}
}
export default MyComponent;
Measure Position
This feature allows you to measure the position (top and left) of a DOM element. The `Measure` component wraps around the element you want to measure, and the `onResize` callback updates the state with the new position whenever the element is resized.
import React from 'react';
import Measure from 'react-measure';
class MyComponent extends React.Component {
state = {
position: {
top: -1,
left: -1
}
};
render() {
return (
<Measure
bounds
onResize={(contentRect) => {
this.setState({ position: contentRect.bounds });
}}
>
{({ measureRef }) => (
<div ref={measureRef} style={{ position: 'relative' }}>
<p>The top position of this element is {this.state.position.top}px</p>
<p>The left position of this element is {this.state.position.left}px</p>
</div>
)}
</Measure>
);
}
}
export default MyComponent;
react-resize-detector is a lightweight package that provides a higher-order component and a hook to detect resize events on a DOM element. It is similar to react-measure in that it allows you to measure the dimensions of an element, but it does not provide as many detailed measurements (e.g., position).
react-use-measure is a React hook that allows you to measure the size and position of a DOM element. It is similar to react-measure but uses hooks instead of a component-based API, making it more suitable for modern React applications that prefer hooks.
react-sizeme is a higher-order component that makes it easy to measure the size of a component. It is similar to react-measure in that it provides dimensions, but it is more focused on providing a simple API for measuring size without additional features like position measurement.
Compute measurements of React components.
import Measure from 'react-measure';
<Measure>
{({width, height, top, right, bottom, left}) =>
<div>
{/* do cool stuff with my dimensions */}
</div>
}
</Measure>
FAQs
Compute measurements of React components.
The npm package react-measure receives a total of 210,548 weekly downloads. As such, react-measure popularity was classified as popular.
We found that react-measure demonstrated a not healthy version release cadence and project activity because the last version was released 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
In an open letter, JavaScript community leaders urge Oracle to give up the JavaScript trademark, arguing that it has been effectively abandoned through nonuse.
Security News
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
Security News
Floating dependency ranges in npm can introduce instability and security risks into your project by allowing unverified or incompatible versions to be installed automatically, leading to unpredictable behavior and potential conflicts.