Simple React Hook utility for identifying and working with screen sizes.
This module is distributed via npm which is bundled with node and
should be installed as one of your project's dependencies
.
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
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
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
}
Looking to contribute? Look for the Good First Issue label.
Please file an issue for bugs, missing documentation, or unexpected behavior.
Please file an issue to suggest new features. Vote on feature requests by adding a 👍. This helps maintainers prioritize what to work on.
Thanks goes to these people:
Marcos Mendes 💻 💼 |
Felipe Alves 💻 💼 |
Contributions of any kind welcome!