Menu Close

A React Hook utility for identifying and working with screen sizes

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.

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

View Source Code
Posted in React