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

var reactSize = require("react-size")

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

react-size v0.1.1

Helpers to manage browser size changes in React.

React-size

Helpers to manage browser size changes in React.

Two Higher-Order Components are provided:

listenResize(Component,useCallback,useScroll,propName)

Listens to an element's own size changes through element-resize-detector.

  • Component: the component to wrap
  • useCallback: by default, the HOC augments properties with a dimensions prop containing {width,height}. If you prefer to manage state internally, then you can provide an onResize callback in your component.
  • useScroll: use the scroll strategy (see element-resize-detector).
  • propName: if useCallback is false, sets the name of the prop that receives the dimensions (by default, dimensions). If useCallback is true, sets the name of the callback (by default, onResize)

listenWindowResize(component,useCallback,propName)

Listens to window resize events through jobj

  • Component: the component to wrap
  • useCallback: by default, the HOC augments properties with a dimensions prop containing {vw,vh,dw,dh} (corresponding respectively to window and document dimensions). If you prefer to manage state internally, then you can provide an onResize callback in your component.
  • propName: if useCallback is false, sets the name of the prop that receives the dimensions (by default, dimensions). If useCallback is true, sets the name of the callback (by default, onResize)

Usage

npm install react-size
import React from 'react'
import {listenWindowResize} from 'react-size'

class MyComponent extends React.Component{
    render(){
        return (<div>{this.props.dim.width}</div>)
    }
}

export default listenWindowResize(MyComponent,false,'dim')

License

MIT

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