Neverending Perpetual Motion

    @react-lit/rect
    TypeScript icon, indicating that this package has built-in type declarations

    0.4.1 • Public • Published

    @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

    Keywords

    none

    Install

    npm i @react-lit/rect

    DownloadsWeekly Downloads

    16

    Version

    0.4.1

    License

    MIT

    Unpacked Size

    9.14 kB

    Total Files

    7

    Last publish

    Collaborators

    • joelvoss