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. Uses resize-observer-polyfill to detect changes of an element and return the new dimensions.
npm install react-measure --save
<script src="https://unpkg.com/react-measure/dist/react-measure.js"></script>
(UMD library exposed as `Measure`)
import Measure from 'react-measure';
import classNames from 'classnames';
class ItemToMeasure extends Component {
state = {
dimensions: {
width: -1,
height: -1
}
}
render() {
const { width, height } = this.state.dimensions
const className = classNames(
(width < 400) && 'small-width-modifier'
)
return (
<Measure
onMeasure={(dimensions) => {
this.setState({dimensions})
}}
>
<div className={className}>
I can do cool things with my dimensions now :D
{ (height > 250) &&
<div>Render responsive content based on the component size!</div>
}
</div>
</Measure>
)
}
}
import Measure from 'react-measure';
const ItemToMeasure = () => (
<Measure>
{ dimensions =>
<div>
Some content here
<pre>
{JSON.stringify(dimensions, null, 2)}
</pre>
</div>
}
</Measure>
)
whitelist
: PropTypes.arrayProvide a list of properties to fire a callback for. Accepts any of the following properties ['width', 'height', 'top', 'right', 'bottom', 'left']
blacklist
: PropTypes.arrayLike above, but will not fire a callback for the specified properties.
includeMargin
: PropTypes.boolWhether or not to include margins in calculation. Defaults to true
.
useClone
: PropTypes.boolTries to give the most accurate measure by cloning the element and measuring it. Use if you your item is hidden or you want know to find out what height/width you need to get to.
cloneOptions
: PropTypes.ObjectPasses clone options to getNodeDimensions.
shouldMeasure
: PropTypes.boolDetermines whether or not a measurement should occur. Useful if you only need to measure in certain cases.
onMeasure
: PropTypes.funcCallback when the component has been mutated. Receives the new dimensions
of your component.
To help avoid layout thrashing, use the prop blacklist
to ignore specific values and stop firing a render to check the DOM for changes. Likewise you can use whitelist
to choose only the ones you need to check.
Margins from hell. If your element is not calculating width or height properly it could be due to a margin hanging outside of its container. To get a true measurement, make sure to not have any hanging margins, in some cases a padding of 1px added to the container will fix this. See the stack overflow answers here for more tricks .
clone repo
git clone git@github.com:souporserious/react-measure.git
move into folder
cd ~/react-measure
install dependencies
npm install
run dev mode
npm run dev
open your browser and visit: http://localhost:8080/
1.4.1
Cleanup old element-resize-detector code #23
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.