Skip to content

Latest commit

 

History

History
 
 

with-resize-observer-props

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
demo
demo
 
 
src
src
 
 
test
test
 
 
package.json
package.json
 
 
readme.md
readme.md
 
 

readme.md

↔️ with-resize-observer-props

npm ci coverage deps

Part of a collection of Higher-Order Components for React, especially useful with Recompose.

Dynamically map component size and position changes to props using Resize Observer API (Can I use? 🙈).

Install

yarn add @hocs/with-resize-observer-props

Usage

withResizeObserverProps(
  mapStateToProps: (observerState: Object) => Object
  onRefName?: string
): HigherOrderComponent

Where:

  • observerState – contentRect object with width, height, top and left properties.
  • onRefName – in some cases you might want to change it. 'onRef' by default.
import React from 'react'
import 'resize-observer-polyfill/dist/ResizeObserver.global'
import { compose, pure } from 'recompose'
import withResizeObserverProps from '@hocs/with-resize-observer-props'

const styles = {
  width: 400,
  resize: 'both',
  overflow: 'hidden',
  border: '1px solid #000'
}

const Demo = ({ onRef, hasNarrowWidth, hasLongHeight }) => (
  <div ref={onRef} style={styles}>
    <h2>resize me!</h2>
    {JSON.stringify({ hasNarrowWidth, hasLongHeight })}
  </div>
)

export default compose(
  withResizeObserverProps(
    ({ width, height }) => ({
      hasNarrowWidth: width < 500,
      hasLongHeight: height >= 300
    })
  ),
  pure
)(Demo)

📺 Check out live demo.

Notes

  • You still might need a polyfill – contains many details on why this particular polyfill is just technically amazing.
  • It's impossible to avoid first render with undefined observer state.
  • "ref approach" is used instead of findDOMNode(this) because it's just less evil. Also it's more flexible so you can pass it to whatever children you want.
  • Target Component will be just passed through on unsupported platforms (i.e. global.ResizeObserver is not a function) like IE9, JSDOM (so Jest as well) or with Server-Side Rendering. This means that there will be no state (i.e. undefined) which might be expected, but you can take care of it using Recompose defaultProps HOC if it's really necessary.

Related