react-getscreen
TypeScript icon, indicating that this package has built-in type declarations

1.1.3 • Public • Published

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

Readme

Keywords

Package Sidebar

Install

npm i react-getscreen

Weekly Downloads

244

Version

1.1.3

License

ISC

Last publish

Collaborators

  • calinortan