@izhaki/use-size
v1.0.6 react hooks size
useSize
A react hook to obtain DOM elements' size.
Ultimately, a compositional take on react-sizeme, barring components (why?).
Features:
- Resize detectors:
- ResizeObserver (browser support)
- ERD
- Regulators:
- Throttle
- Debounce
Install
npm install @izhaki/use-size
Usage
Size Once
Will only size the component upon mount.
import useSize from '@izhaki/use-size';
function SizeOnce() {
const { ref, size } = useSize();
return <div ref={ref} />;
}
With ResizeObserver
Use the native ResizeObserver as a resize detector.
import useSize from '@izhaki/use-size';
import resizeObserver from '@izhaki/use-size/detectors/resizeObserver';
function ResizeObserver() {
const { ref, size } = useSize({
detector: resizeObserver(),
});
return <div ref={ref} />;
}
With Throttle
import useSize from '@izhaki/use-size';
import resizeObserver from '@izhaki/use-size/detectors/resizeObserver';
import { throttle } from '@izhaki/use-size/regulators';
function ResizeObserverWithThrottle() {
const { ref, size } = useSize({
detector: resizeObserver({ regulator: throttle(100) }),
});
return <div ref={ref} />;
}
With Debounce
import useSize from '@izhaki/use-size';
import resizeObserver from '@izhaki/use-size/detectors/resizeObserver';
import { debounce } from '@izhaki/use-size/regulators';
function ResizeObserverWithDebounce() {
const { ref, size } = useSize({
detector: resizeObserver({ regulator: debounce(100) }),
});
return <div ref={ref} />;
}
⚠️ Prefer throttle over debounce, unless your view takes a noticeable time to render (say, 15000 SVG nodes or somesuch).
Using ERD
import useSize from '@izhaki/use-size';
import erd from '@izhaki/use-size/detectors/erd';
import { throttle } from '@izhaki/use-size/regulators';
function ErdWithThrottle() {
const { ref, size } = useSize({
detector: erd({ regulator: throttle(100) }),
});
return <div ref={ref} />;
}
Why no Components?
Components add to the API surface, specifically as there are rather few scenarios to cover:
- Do we add an element to the DOM? Which one? How will it be styled?
- Do we Forward Ref?
- Do we support render props?
- What about High Order Components?
Writing all of these components with useSize
is cheap (a few lines of code), and each component can be tailored to specific needs.
Example of a component that adds a div to the DOM
import useSize from '@izhaki/use-size';
import resizeObserver from '@izhaki/use-size/detectors/resizeObserver';
import { throttle } from '@izhaki/use-size/regulators';
function Sizer({ children }) {
const { ref, size } = useSize({
detector: resizeObserver({ regulator: throttle(100) }),
});
return <div ref={ref}>{children}</div>;
}