React Screen Size Helper

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

Links

• Github
• NPM

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