rc-target-size

    3.1.0 • Public • Published

    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

    name type description
    mode String (optional) values is 'debounce' or 'throttle', mode refresh size of component when resize. default: 'throttle'
    rate Number (optional) rate refresh size of component when resize, measurement is milliseconds. default: 500
    querySelector String (optional) if you do not want to get the size of the current element, you can take another element. default: undefined
    handleWidth Boolean (optional) only update value when width resized. default: false
    handleHeight Boolean (optional) only update value when height resized. default: false
    handleOffset Boolean (optional) only update value when offset changed. default: false
    updateOnChange Boolean (optional) will received values since the initial creation? default: true
    onSize Func (optional) function callback on have size. default: undefined

    Props

    values return to your components, append to props

    name type description
    width Number width of element. default: 0
    height Number height of element. default: 0
    offset Object offset of element. default: { x: 0, y: 0 }
    canUseDOM Boolean the test was able to use DOM or not

    Install

    npm i rc-target-size

    DownloadsWeekly Downloads

    55

    Version

    3.1.0

    License

    MIT

    Unpacked Size

    204 kB

    Total Files

    30

    Last publish

    Collaborators

    • lamhieu