React Screen Size Helper
Simple React Hook utility for identifying and working with screen sizes.
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
Contributors
Thanks goes to these people:
Marcos Mendes |
Felipe Alves |
Contributions of any kind welcome!