Decorate your React component and get notified when its dimensions change.
npm install react-measurable
React-measurable is compatible with React 16.3 and React strict mode since it uses the new createRef
API.
It also depends on resize-observer-polyfill for browsers that don't support the ResizeObserver API (non-Chrome). The performance depends entirely on the polyfill performance.
https://hfour.github.io/react-measurable/
- Decorate your component with
@measurable
. - In your
componentDidMount
lifecycle method, make sure you callobserveResize
. - If you use Typescript, the component's props need to extend
MeasurableProps
. - You don't need to worry about unobserving the DOM node - the decorator handles that.
import * as React from "react";
import { measurable, MeasurableProps } from "../src";
interface MyProps extends MeasurableProps {}
@measurable
export class MyComponent extends React.Component<MyProps> {
ref = React.createRef<HTMLDivElement>();
componentDidMount() {
this.props.observeResize(this.ref, (rect, target) => {
// Do something
});
}
render() {
return <div ref={this.ref}>A div that could change size</div>;
}
}
The decorator adds an additional prop to your component. The prop is a registration function which needs to be called in your componentDidMount
lifecycle method.
You need to pass a ref to your DOM node and a callback to the observeResize
function. The DOM node ref can be any DOM node, not necessarily the one rendered by the decorated component. The ref needs to be a React.RefObject
, supported in React 16.3. The callback will be called when a size change is observer and will be passed a DOMRectReadyOnly
object and a the actual observed DOM node.
// The Element and DOMRectReadOnly are standard DOM types.
export interface MeasurableProps extends React.Attributes {
observeResize?: <T extends Element>(
ref: React.RefObject<T>,
callback: (rect: DOMRectReadOnly, target: T) => void
) => void;
}
The decorator makes very little assumptions about how you use it. It does not perform extra measurements on components apart from what the polyfill does. It only notifies your component when its size changes, with a minimal API.
If you want notifications to parent components, you could do the following:
interface MyProps extends MeasurableProps {
// Passed by the parent to observe clild resizes
onResize: (rect: ClientRect) => void;
}
@measurable
export class MyComponent extends React.Component<MyProps> {
// ...
componentDidMount() {
this.props.observeResize(this.ref, (rect, target) => {
// Perform more measurements
this.props.onResize(getBoundingClientRect(target));
});
}
// ...
}
The decorator doesn't use prop-types because, well, typescript exists.
MIT