@talves/use-component-size
v0.3.1
Published
React hook (useComponentSize)
Downloads
12
Readme
Installation
This module is distributed via npm which is bundled with node and
should be installed as one of your project's dependencies
:
npm install --save @talves/use-component-size
OR
yarn add @talves/use-component-size
Usage
/* using react ^17.0.1 */
// Creates a component that runs onSizeChange of the component
// only when the component size changed, give current and previous
import { useRef, useCallback, useEffect } from "react";
import { useComponentSize } from "@talves/use-component-size";
import { usePrevious } from "@talves/use-previous";
function sizeEqual(a, b) {
return JSON.stringify(a) === JSON.stringify(b);
}
const SizeWrapper = ({ children, onSizeChange, ...props }) => {
const wrapperRef = useRef(null);
const componentSize = useComponentSize(wrapperRef); // A custom Hook
const previousSize = usePrevious(componentSize);
const handleSizeChange = useCallback(
(size) => {
if (typeof onSizeChange === "function") {
onSizeChange(size);
}
},
[onSizeChange]
);
useEffect(() => {
const notEqual = !sizeEqual(componentSize, previousSize);
if (notEqual) {
handleSizeChange({
current: componentSize,
previous: previousSize,
});
}
}, [componentSize, previousSize, handleSizeChange]);
return (
<div ref={wrapperRef} {...props}>
{children}
</div>
);
};
export default SizeWrapper;
NOTE: This is a module
package library for react with jsx. The choice is to resolve the export of main to src/index.js
. There is a commonjs version in dist/cjs/index.js
if someone needed.
Other Solutions
Plenty of other usePrevious hooks out there.