tusharmath/react-announce-size

a react-announce declarative that exposes component size as a stream

react-announce-size

A react-announce based decorator that dispatches a custom event — RESIZE, on the component's stream whenever there is a real change in size.

Installation

npm i react-announce-size --save

Usage

import {size} from 'react-announce-size'
import {asStream} from 'react-announce'
import {Component} from 'react'

/*
The decorator will automatically dispatch the size of `Container` component whenever the screen size changes or the component itself is re-rendered.
*/


@asStream(observer)
@size
class Container extends Component {
  render () {
    return (
      <div style={{width: '100%'}}>
        <span>Hello World!</span>
        <StickyTop/>
      </div>
    )
  }
}
observer.subscribe(x => console.log(x))

/** OUTPUT

  Object {component: Container, event: "WILL_MOUNT", args: Array[]}
  Object {component: Container, event: "DID_MOUNT", args: Array[]}
  Object {component: Container, event: "RESIZE", args: Array[1]}
  Object {component: Container, event: "RESIZE", args: Array[1]}
  ...

  **/