1.1.0 • Published 9 years ago

react-announce-size v1.1.0

Weekly downloads
4
License
ISC
Repository
github
Last release
9 years ago

react-announce-size

Build Status npm

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

Installation

npm i react-announce-size --save

Usage

Say I need to set the width of something that has position: fixed equal to that of its parent container. I can do this using this module + the ever-useful @connect declarative.

import {createSizeStream} from 'react-announce-size'
import {hydrate} from 'react-announce-hydrate'
import {connect} from 'react-announce-connect'
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.
*/
const toolbar = createSizeStream()
@hydrate([toolbar.sync()])
class Container extends Component {
  render () {
    return (
      <div style={{width: '100%'}}>
        <span>Hello World!</span>
        <StickyTop/>
      </div>
    )
  }
}

@connect({
  size: toolbar.getStream()
})
class StickyTop extends Component {
  render () {
    const {left, right} = this.state
    return (
      <div style={{position: 'fixed', top: 0, left, right}}>
        <span>STICKY PEOPLE</span>
      </div>
    )
  }
}
1.1.0

9 years ago

1.0.1

9 years ago

1.0.0

9 years ago

0.4.3

9 years ago

0.4.2

9 years ago

0.4.1

9 years ago

0.4.0

9 years ago

0.3.1

9 years ago

0.3.0

9 years ago

0.2.1

9 years ago

0.2.0

9 years ago

0.0.11

10 years ago

0.1.0

10 years ago

0.0.10

10 years ago

0.0.9

10 years ago

0.0.9-0

10 years ago

0.0.8

10 years ago

0.0.7

10 years ago

0.0.6

10 years ago

0.0.5

10 years ago

0.0.4

10 years ago

0.0.3

10 years ago

0.0.2

10 years ago

0.0.1

10 years ago