diff --git a/modules/Media.js b/modules/Media.js index b6995e2..7e29d09 100644 --- a/modules/Media.js +++ b/modules/Media.js @@ -9,6 +9,39 @@ import MediaQueryList from "./MediaQueryList"; * Conditionally renders based on whether or not a media query matches. */ class Media extends React.Component { + constructor(props) { + super(props); + + if (typeof window !== "object") return; + + const targetWindow = props.targetWindow || window; + + invariant( + typeof targetWindow.matchMedia === "function", + " does not support `matchMedia`." + ); + + let { query } = props; + if (typeof query !== "string") query = json2mq(query); + + this.mediaQueryList = new MediaQueryList( + targetWindow, + query, + this.updateMatches + ); + + const { matches } = this.mediaQueryList; + + this.state = { + matches: matches && props.defaultMatches + }; + + const { onChange } = props; + if (onChange) { + onChange(matches); + } + } + static propTypes = { defaultMatches: PropTypes.bool, query: PropTypes.oneOfType([ @@ -26,10 +59,6 @@ class Media extends React.Component { defaultMatches: true }; - state = { - matches: this.props.defaultMatches - }; - updateMatches = () => { const { matches } = this.mediaQueryList; @@ -41,27 +70,6 @@ class Media extends React.Component { } }; - componentWillMount() { - if (typeof window !== "object") return; - - const targetWindow = this.props.targetWindow || window; - - invariant( - typeof targetWindow.matchMedia === "function", - " does not support `matchMedia`." - ); - - let { query } = this.props; - if (typeof query !== "string") query = json2mq(query); - - this.mediaQueryList = new MediaQueryList( - targetWindow, - query, - this.updateMatches - ); - this.updateMatches(); - } - componentWillUnmount() { this.mediaQueryList.cancel(); }