Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including @render-props/rect with all npm packages installed. Try it out:

require("prop-types/package.json"); // prop-types is a peer dependency. require("react/package.json"); // react is a peer dependency. var rect = require("@render-props/rect")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

@render-props/rect v0.1.22

Rect

A state container which provides an interface for retrieving the bounding client rect of a referenced element. The bounding client rect will update each time the window resizes - a behavior which can be turned off by setting the prop recalcOnWindowResize to false. It doesn't provide values for x and y, as IE, Edge and Safari don't have them as part of their DOMRect.

Installation

yarn add @render-props/rect or npm i @render-props/rect


Usage

import Rect from '@render-props/rect'

function DivWithRect (props) {
  return (
    <Rect>
      ({rectRef, recalcRect, top, right, bottom, left, width, height}) => (
        <div ref={rectRef}>
          <div>
            My width: {width}
          </div>
          <div>
            My height: {height}
          </div>
          <div>
            My position: {JSON.stringify({top, right, bottom, left})}
          </div>
        </div>
      )
    </Rect>
  )
}

Props

  • recalcOnWindowResize {bool}: if true, this component will update itself each time a window resize event is detected. Defaults to true.
  • withCoords {bool}: if true, this component will provide its child function with unpacked arguments for its bounding client rect, i.e. {top, right, bottom, left, width, height}. If false, it will provide a function getRect instead which will return the same object just mentioned. Defaults to true.

Render Props

Ref

  • rectRef (element)
    • This ref must be provided to whatever element you are trying to receive the bounding client rect for. e.g. <div ref={rectRef}>

Methods

  • recalcRect
    • remeasures the element bound to rectRef
  • getRect
    • only present if withCoords is set to false. Returns the bounding client rect object.

State

Note: these are only provided if withCoords is true.

  • top {number}: the top coordinate value of the DOMRect
  • right {number}: the right coordinate value of the DOMRect
  • bottom {number}: the bottom coordinate value of the DOMRect
  • left {number}: the left coordinate value of the DOMRect
  • width {number}: the width of the DOMRect
  • height {number}: the height of the DOMRect

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free