1.0.18 • Published 3 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
3 years ago
1.0.17
5 years ago
1.0.16
5 years ago
1.0.15
5 years ago
1.0.14
5 years ago
1.0.13
5 years ago
1.0.12
5 years ago
1.0.9
5 years ago
1.0.8
5 years ago
1.0.11
5 years ago
1.0.10
5 years ago
1.0.7
5 years ago
1.0.6
5 years ago
1.0.5
5 years ago
1.0.4
5 years ago
1.0.2
5 years ago
1.0.1
5 years ago
1.0.3
5 years ago
1.0.0
5 years ago