@react-ng/bounds-observer
v0.2.1
Published
A React component for observing element's bounds
Downloads
7,730
Readme
bounds-observer
A React wrapper for the @html-ng/bounding-client-rect-observer
library, providing a React component that observes changes in the bounding client rect of its child.
Installation
npm install @react-ng/bounds-observer
Examples
Basic Example
This example demonstrates how to use the BoundsObserver
component to observe an element's bounding client rect.
import React from 'react';
import { BoundsObserver } from '@react-ng/bounds-observer';
const MyComponent = () => {
const handleBoundsChange = (bounds: DOMRect) => {
console.log('Bounds changed:', bounds);
};
return (
<BoundsObserver enabled={true} onBoundsChange={handleBoundsChange}>
<div id="my-element">Content</div>
</BoundsObserver>
);
};
Conditional Enabling
This example demonstrates how to enable and disable the BoundsObserver
component using the enabled
prop.
import React, { useState } from 'react';
import { BoundsObserver } from '@react-ng/bounds-observer';
const MyComponent = () => {
const [enabled, setEnabled] = useState(false);
// This will be called only when the observer is enabled
const handleBoundsChange = (bounds: DOMRect) => {
console.log('Bounds changed:', bounds);
};
const toggleEnabled = () => {
setEnabled(!enabled);
};
return (
<div>
<button onClick={toggleEnabled}>
{enabled ? 'Disable' : 'Enable'} observer
</button>
<BoundsObserver enabled={enabled} onBoundsChange={handleBoundsChange}>
<div id="my-element">Content</div>
</BoundsObserver>
</div>
);
};
API Documentation
BoundsObserver
The React component for observing changes in the bounding client rect of its child. It accepts a single child.
Properties:
enabled: boolean
: Whether the observer should be enabledonBoundsChange: (bounds: DOMRect) => void
: The callback function that will be invoked when the bounding client rect of theBoundsObserver
component's child changes, but only when the observer is enabled. Additionally, this callback will be invoked on enabling, i.e. when theenabled
property changes totrue
or the component is initialized withenabled
beingtrue
.
License
Apache License 2.0