react-size

Helpers to manage browser size changes in React.

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
react-size
000.1.18 years ago8 years agoMinified + gzip package size for react-size in KB

Readme

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