A React Hook utility for identifying and working with screen sizes

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:

npm install react-screen-size-helper

or

for installation via yarn

yarn add react-screen-size-helper

Examples

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

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

  return (
    <h1>Current Width is: {currentWidth}</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>}
  )
}

export default App

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

GitHub

View Github