@reach/rect

Docs | Source

Measures DOM elements (aka. bounding client rect). See also Element.getBoundingClientRect()

import { Rect, useRect } from "@reach/rect";

function Example() {
    const ref = React.useRef();
    const rect = useRect(ref);

    return (
        <div>
            <pre>{JSON.stringify(rect, null, 2)}</pre>
            <div
                ref={ref}
                contentEditable
                dangerouslySetInnerHTML={{
                    __html: "Edit this to change the size!",
                }}
            />
        </div>
    );
}

@reach/rect

0.18.0

BREAKING Changes

• All default exports have been removed. Replace all default imports with the appropriate documented named export.
• The output directory structure has changed slightly. Module files are now named reach-<pkg>.mjs instead of reach-<pkg>.esm.js.

Minor Changes

• We have simplified our build setup to remove a boatload of dependencies. Build output for all packages may look slightly different, though functionally packages that don't have explicit changes marked in the release notes have not changed.

  This may affect you if you use patch-package to modify output code. If you need support for legacy browsers, the new bundle may not transpile the same ECMA features as before. In that case you may want to transpile Reach packages directly.

Patch Changes

• Updated dependencies:
  • @reach/utils@0.18.0