react-hook-resolution

Get the screen resolution of your page with a simple react hook

Install

npm install --save react-hook-resolution

Usage

See this example for live demo

import React, { Component } from 'react';

import { useResolution } from 'react-hook-resolution';

class Example extends Component {
  const resolution = useResolution();

  render() {
    return <div>
        {resolution.mobile && 'I am on mobile !'}
    </div>
  }
}

Pass config to override the default breakpoints

import React, { Component } from 'react';

import { useResolution } from 'react-hook-resolution';

class Example extends Component {
  const resolution = useResolution({
                                           desktop: 1200,
                                           tablet: 900,
                                           mobile: 0
                                       });

  render() {
    return <div>
        {resolution.mobile && 'I am on mobile !'}
    </div>
  }
}

License

MIT © Keized