@react-lit/rect
v0.7.0
Published
Provides `<Rect />` and `useRect` to measure Elements via `Element.getBoundingClientRect()`.
Downloads
10
Readme
@react-lit/rect
Provides <Rect />
and useRect
to measure Elements via
Element.getBoundingClientRect()
.
Installation
$ npm i @react-lit/rect
# or
$ yarn add @react-lit/rect
Example
import * as React from 'react';
import { Rect, useRect } from "@react-lit/rect";
// (1) Example using <Rect />
function RectExample() {
return (
<Rect>
{({ ref, rect }) => (
<div>
<pre>{JSON.stringify(rect, null, 2)}</pre>
<span
ref={ref}
contentEditable
dangerouslySetInnerHTML={{
__html: "Edit this to change the size!",
}}
/>
</div>
)}
</Rect>
);
}
// (2) Example using useRect()
function UseRefExample() {
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>
);
}
Development
(1) Install dependencies
$ npm i
# or
$ yarn
(2) Run initial validation
$ ./Taskfile.sh validate
(3) Run tests in watch-mode to validate functionality.
$ ./Taskfile test -w
This project was set up by @jvdx/core