a react-announce declarative that exposes component size as a stream
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
test
.gitignore
.travis.yml
README.md
index.js
package.json

README.md

react-announce-size

Build Status npm

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]}
  ...

  **/