1.0.18 • Published 2 years ago
react-screentype-hook v1.0.18
react-screentype-hook
React hook to dynamically get current screen type (mobile, tablet, desktop, largeDesktop)
Install
// with npm
npm install react-screentype-hook
// with yarn
yarn add react-screentype-hook
Sample Response
const screenType = useScreenType();
console.log(screenType);
{
isLargeDesktop: false,
isDesktop: false,
isMobile: true,
isTablet: false
}
How to use
Without custom breakpoints
import React from "react";
import useScreenType from "react-screentype-hook";
function App() {
const screenType = useScreenType();
return (
<div style={{ height: "100vh", width: "100vw" }}>
<img
src={
screenType.isMobile
? "https://picsum.photos/200/200"
: "https://picsum.photos/400/400"
}
/>
</div>
);
}
export default App;
With custom breakpoints
import React from "react";
import useScreenType from "react-screentype-hook";
function App() {
const screenType = useScreenType({
mobile: 400,
tablet: 800,
desktop: 1000,
largeDesktop: 1600,
});
return (
<div style={{ height: "100vh", width: "100vw" }}>
<img
src={
screenType.isMobile
? "https://picsum.photos/200/200"
: "https://picsum.photos/400/400"
}
/>
</div>
);
}
export default App;
License
1.0.18
2 years ago
1.0.17
4 years ago
1.0.16
4 years ago
1.0.15
4 years ago
1.0.14
4 years ago
1.0.13
4 years ago
1.0.12
4 years ago
1.0.9
4 years ago
1.0.8
4 years ago
1.0.11
4 years ago
1.0.10
4 years ago
1.0.7
4 years ago
1.0.6
4 years ago
1.0.5
4 years ago
1.0.4
4 years ago
1.0.2
4 years ago
1.0.1
4 years ago
1.0.3
4 years ago
1.0.0
4 years ago