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