React Screen Size Helper

Simple React Hook utility for identifying and working with screen sizes.

Installation

This module is distributed via npm which is bundled with node and should be installed as one of your project's dependencies.

Installing

Package Manager

Using npm:

npm install react-screen-size-helper

Using yarn:

yarn add react-screen-size-helper

Using bower:

bower install react-screen-size-helper

Using pnpm:

pnpm add react-screen-size-helper

Example

import React from 'react'
import { useScreenSize } from 'react-screen-size-helper'

const App = () => {
  const {
    currentWidth,
    currentHeight,
    isLargeDesktop,
    isDesktop,
    isTablet,
    isMobile
  } = useScreenSize({})

  return (
    <div>
      <h1>Current Width is: {currentWidth}</h1>
      <h1>Current Height is: {currentHeight}</h1>

      {isLargeDesktop && <p>Only show on Large Desktop</p>}
      {isDesktop && <p>Only show on Desktop</p>}
      {isTablet && <p>Only show on Tablet</p>}
      {isMobile && <p>Only show on Mobile</p>}
    </div>
  )
}

export default App

Example with Custom Breakpoints

import React from 'react'
import { useScreenSize } from 'react-screen-size-helper'

const App = () => {
  const breakpoints = {
    small: 500,
    medium: 800,
    large: 1600
  }

  const {
    currentWidth,
    currentHeight,
    isLargeDesktop,
    isDesktop,
    isTablet,
    isMobile
  } = useScreenSize({ breakpoints })

  return (
    <div>
      <h1>Current Width is: {currentWidth}</h1>
      <h1>Current Height is: {currentHeight}</h1>

      {isLargeDesktop && <p>Only show on Large Desktop</p>}
      {isDesktop && <p>Only show on Desktop</p>}
      {isTablet && <p>Only show on Tablet</p>}
      {isMobile && <p>Only show on Mobile</p>}
    </div>
  )
}

export default App

Note: The default breakpoints below:

const defaultBreakpoints = {
  small: 425,
  medium: 768,
  large: 1024
}

Issues

Looking to contribute? Look for the Good First Issue label.

🐛 Bugs

Please file an issue for bugs, missing documentation, or unexpected behavior.

💡 Feature Requests

Please file an issue to suggest new features. Vote on feature requests by adding a 👍. This helps maintainers prioritize what to work on.

Contributors

Thanks goes to these people:

_{Marcos Mendes}

_{Felipe Alves}

Contributions of any kind welcome!

LICENSE

MIT