windowリサイズイベント取得
react-event-listenerをインストール
yarn add react-event-listener
react-event-listenerをインポート
import EventListener from 'react-event-listener';
windowがリサイズされたらコンソールにwindow.innerHeightとwindow.innerWidthを出すサンプル
Home.js
import React from 'react';
import PropTypes from 'prop-types';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
import EventListener from 'react-event-listener';
import s from './Home.css';
class Home extends React.Component {
handleResize = () => {
console.info(
`window height:width=${window.innerHeight}:${window.innerWidth}`,
);
};
render() {
return (
<div className={s.root}>
<EventListener target="window" onResize={this.handleResize} />
</div>
);
}
}
export default withStyles(s)(Home);