If you want to detect if screen size has changed to mobile in React? What I did is adding an event listener after component mount:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | import React, { Component } from 'react'; import {withGetScreen} from 'react-getscreen' class Test extends Component { render() { if (this.props.isMobile()) return <div>Mobile</div>; if (this.props.isTablet()) return <div>Tablet</div>; return <div>Desktop</div>; } } export default withGetScreen(Test); //you may set your own breakpoints by providing an options object const options = {mobileLimit: 500, tabletLimit: 800} export default withGetScreen(Test, options); |
If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.
