react-getscreen
v1.1.3
Published
A react higher order component which provides some methods to determine your screen type
Downloads
954
Readme
###REACT-GETSCREEN
This package provides a React higher order component which adds some useful methods to your wrapped components in order to get your screen width. While you should solve your responsiveness issues with css, sometimes you just need to render different components depending on the display type.
######Install
npm install react-getscreen --save
######Example
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);
It supports an options object containing following props:
- mobileLimit - Max width for mobile display. default = 468
- tabletLimit - Max width for tablet display. default=768
- shouldListenOnResize - Boolean describing whether it should listen on screen resize. default=true