Source: lern-layouts/mixins/Screen.jsx

  1. import React from 'react';
  2. /**
  3. * Screen - bind on view state heigth and width
  4. * @class
  5. * @public
  6. * @memberof LernLayouts.Mixins
  7. * @example
  8. * import { Screen } from 'meteor/duckdodgerbrasl:lern-layouts';
  9. * ...
  10. * class SomeView extends React.Component {
  11. * ...
  12. * const { innerWidth, innerHeight } = this.state;
  13. * ...
  14. * }
  15. * ...
  16. * export default Screen(SomeView);
  17. * @return {object} this.state.innerHeight and this.state.innerWidth
  18. */
  19. const Screen = (WrappedCompenent) => class View extends React.Component {
  20. // Lifecycle
  21. constructor(props) {
  22. super(props);
  23. this.state = {
  24. innerHeight: window.innerHeight,
  25. innerWidth: window.innerWidth,
  26. };
  27. }
  28. componentDidMount() {
  29. window.addEventListener('resize', this.handleResize.bind(this));
  30. }
  31. componentWillUnmount() {
  32. window.removeEventListener('resize', this.handleResize.bind(this));
  33. }
  34. // handlers
  35. handleResize(e) {
  36. this.setState({ innerHeight: window.innerHeight, innerWidth: window.innerWidth });
  37. }
  38. render() {
  39. return <WrappedCompenent {...this.state} />;
  40. }
  41. };
  42. export default Screen;