react-getscreen

A react higher order component which provides some methods to determine your screen type

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
react-getscreen
1211.1.36 years ago6 years agoMinified + gzip package size for react-getscreen in KB

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