react-screen-size-helper
TypeScript icon, indicating that this package has built-in type declarations

1.0.3 • Public • Published

React Screen Size Helper

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


notebook smartphone notebook

Links

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
Marcos Mendes

💻 💼
Marcos Mendes
Felipe Alves

💻 💼

Contributions of any kind welcome!

LICENSE

MIT

Package Sidebar

Install

npm i react-screen-size-helper

Weekly Downloads

143

Version

1.0.3

License

MIT

Unpacked Size

23 kB

Total Files

12

Last publish

Collaborators

  • marcosdev.me