1.1.0 • Published 8 years ago
react-announce-size v1.1.0
react-announce-size
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
8 years ago
1.0.1
8 years ago
1.0.0
8 years ago
0.4.3
8 years ago
0.4.2
8 years ago
0.4.1
8 years ago
0.4.0
8 years ago
0.3.1
8 years ago
0.3.0
8 years ago
0.2.1
8 years ago
0.2.0
8 years ago
0.0.11
8 years ago
0.1.0
8 years ago
0.0.10
8 years ago
0.0.9
8 years ago
0.0.9-0
8 years ago
0.0.8
8 years ago
0.0.7
8 years ago
0.0.6
8 years ago
0.0.5
8 years ago
0.0.4
8 years ago
0.0.3
8 years ago
0.0.2
8 years ago
0.0.1
8 years ago