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 rc-target-size with all npm packages installed. Try it out:

require("react/package.json"); // react is a peer dependency. require("react-dom/package.json"); // react-dom is a peer dependency. var rcTargetSize = require("rc-target-size")

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

rc-target-size v3.1.0

a tool help get size of element for React, support higher-order component and component render.

About

npm version npm downloads github issues build status

A tool help get size of element for React, support higher-order component and component render. You can get the size of the element using a row without changing any of the elements!

Reference

rc-pure-component

A wrapper use pure component wrap stateless functional components to class use pure component to reduce re-render. read more

resize-observer-polyfill

A polyfill for the resize observer api. read more

Installation

# use npm
$ npm install rc-target-size

# or yarn
$ yarn add rc-target-size

CDN

// unpkg
<script src="https://unpkg.com/rc-target-size/dist/rc-target-size.js"></script>

// jsdelivr
<script src="https://cdn.jsdelivr.net/npm/rc-target-size/dist/rc-target-size.js"></script>

Note use CDN in browser, you can call rcTargetSize from Window API. it is available at window.rcTargetSize

Usage

Component render

read more

import React from "react";
import { TargetSize } from "rc-target-size";

const ResizeOfMe = ({ width, height }) => (
  <div>
    component - size of me: {width}x{height}
  </div>
);

const onSize = data => console.log("onSize", data);

const App = () => (
  <div>
    // simple
    <TargetSize>
      <ResizeOfMe />
    </TargetSize>
    // or use with config
    <TargetSize mode="debounce" rate={1000} handleHeight onSize={onSize}>
      <ResizeOfMe />
    </TargetSize>
  </div>
);

export default App;

HOC render

read more

import React from "react";
import { targetSize } from "rc-target-size";

const ResizeOfMeWrapped = ({ width, height }) => (
  <div>
    hoc - size of me: {width}x{height}
  </div>
);

// simple
const ResizeOfMe = targetSize()(ResizeOfMeWrapped);

// or use with config
const ResizeOfMe = targetSize({
  mode: "debounce",
  rate: 1000,
  handleWidth: true,
  onSize: data => console.log("onSize", data),
})(ResizeOfMeWrapped);

const App = () => (
  <div>
    <ResizeOfMe />
  </div>
);

export default App;

Child function

read more

import React from "react";
import { TargetSize } from "rc-target-size";

const onSize = data => console.log("onSize", data);

const App = () => (
  <div>
    // simple
    <TargetSize>
      {({ width, height }) => (
        <div>
          child function - size of me: {width}x{height}
        </div>
      )}
    </TargetSize>
    // or use with config
    <TargetSize mode="debounce" rate={1000} handleHeight onSize={onSize}>
      {({ width, height }) => (
        <div>
          child function - size of me: {width}x{height}
        </div>
      )}
    </TargetSize>
  </div>
);

export default App;

Documents

Config

nametypedescription
modeString(optional) values is 'debounce' or 'throttle', mode refresh size of component when resize. default: 'throttle'
rateNumber(optional) rate refresh size of component when resize, measurement is milliseconds. default: 500
querySelectorString(optional) if you do not want to get the size of the current element, you can take another element. default: undefined
handleWidthBoolean(optional) only update value when width resized. default: false
handleHeightBoolean(optional) only update value when height resized. default: false
handleOffsetBoolean(optional) only update value when offset changed. default: false
updateOnChangeBoolean(optional) will received values since the initial creation? default: true
onSizeFunc(optional) function callback on have size. default: undefined

Props

values return to your components, append to props

nametypedescription
widthNumberwidth of element. default: 0
heightNumberheight of element. default: 0
offsetObjectoffset of element. default: { x: 0, y: 0 }
canUseDOMBooleanthe test was able to use DOM or not

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