ES7 Decoratorでresizeイベントをいい感じに処理してくれるパッケージ作ったよ

今、React・Fluxで作っているツールで、window.onresize時にwindow.innerHeightをdivのheightとして設定するようなComponentを作った。

こういう感じ：

class Example extends React.Component {
	constructor (props) {
		super(props);

		this._onWindowResize = this.onWindowResize.bind(this)
		this.setState({ height: 0, width: 0 })
	}

	render () {
		let {width, height} = this.state;
		return <div {...this.props} style={{ width, height }} />;
	}

	onWindowResize () {
		this.setState({
			height: window.innerHeight,
			width: window.innerWidth
		});
	}

	componentDidMount () {
		window.addEventListener('resize', this._onWindowResize);
	}

	componentWillUnmount () {
		window.removeEventListener('resize', this._onWindowResize);
	}
}

「これはES7 DecoratorやHigher-Order Componentで共通化出来そうだ」と思ったので、on-resizeというパッケージを作りました。

使い方

インストール

$ npm install --save on-resize

ES7 Decoratorの場合

import {onResize} from "on-resize/react";

@onResize()
class Example extends React.Component {
	render () {
		// window.onresize時にwidth, heightが渡ってくる
		let {width, height} = this.props;
		return <div {...this.props} style={{ width, height }} />;
	}
}

デフォルトではwindow.onresize時に、window.innerWidth - props.offsetWidthがwidthに、window.innerHeight - props.offsetHeightがheightに、props経由で渡ってくる。
渡ってくる値とか変数名を変えたい場合は、@onResizeに引数として渡せば変更できる。

@onResize((props) => ({
	innerWidth: window.innerWidth,
	innerHeight: window.innerHeight
}))

// OR

@onResize({
	select: (props) => ({
		innerWidth: window.innerWidth,
		innerHeight: window.innerHeight
	}
})

Higher-Order Componentの場合

Decoratorとほとんど一緒。bindOnResizeをimport（require）して使う

import {bindOnResize} from "on-resize/react";

class Example extends React.Component {
	render () {
		// window.onresize時にwidth, heightが渡ってくる
		let {width, height} = this.props;
		return <div {...this.props} style={{ width, height }} />;
	}
}

// ラップしたComponentを返す
export default bindOnResize(Example);

挙動の変更もDecoratorと一緒。

bindOnResize(Component, (props) => ({
	innerWidth: window.innerWidth,
	innerHeight: window.innerHeight
}))

// OR

bindOnResize(Component, {
	select: (props) => ({
		innerWidth: window.innerWidth,
		innerHeight: window.innerHeight
	}
})

まとめ

• ES7 Decorator、最初きもいなーと思ったけど使うと便利
• インターフェースはreduxを結構参考にしている
  • 今後React以外にも対応できるようにon-resize/reactにしたりとか
• テスト書くの面倒なので、ちょっとしか書いてない。書かねば。

何かバグとかあれば、Githubのissueでご連絡くださいー