Function to call when the element is rendered/mounted
An object containing a ref setter function to attach to the element
import { useObserveElementRendering } from '@consumidor-positivo/ts-utils/hooks';
function AnimatedComponent({someProp}) {
const handleElementRendered = (element: HTMLElement) => {
console.log('Element has been rendered!', element);
// Start animations, measure dimensions, etc.
// You can access the element directly here
};
const { ref } = useObserveElementRendering(handleElementRendered);
return (
<div className="animated-content">
{someProp && (<span ref={ref}> My dynamic element </span>)}
This element will trigger the callback when rendered
</div>
);
}
A hook that observes when an element is rendered/mounted in the DOM and triggers a callback.
This hook provides a way to execute code when an element is first rendered or when a new element is assigned to the ref. It's useful for triggering animations, measurements, or other side effects that depend on DOM element availability.