1.0.7 • Published 8 months ago
react-system-hook v1.0.7
React System Hook
Several hooks\helpers to work with device's screen.
Install
npm i react-system-hook
Usage
import {
useSystem,
useScreenHeight,
useScreenWidth,
useScreenSize,
useDocumentVisibility,
ScreenWidthNameEnum,
screenMinWidth, // object: Record<ScreenWidthNameEnum, number>
getScreenName, // (screenWidth: number) => ScreenWidthNameEnum
} from 'react-system-hook';
export function ExampleApp(): JSX.Element {
const {
screenInfo,
isBrowser, // true if running in browser, false for SSR
} = useSystem();
const {
devicePixelRatio, // number, default: 2, usually is 2 for smartphones
isLandscape, // true if width > height
isMobile, // screen width < 768
isPortrait, // opposite for isLandscape
name, // ScreenWidthNameEnum, relative from screen width: 'desktop', 'mobile' or 'tablet'
isTablet, // screen width < 1024 and width >= 768
isDesktop, // screen width >= 1024
} = screenInfo;
const {
height, // number, default: 768
width, // number, default: 1024
} = useScreenSize();
const screenWidth = useScreenWidth(); // number, default: 1024
const screenHeight = useScreenHeight(); // number, default: 768
const isDocumentVisible = useDocumentVisibility(); // true or false
return (
<div>
<pre>screenInfo = {JSON.stringify(screenInfo, null, 4)}</pre>
<pre>
useScreenSize = width: {height}, height: {width}
</pre>
<pre>useScreenWidth = width: {screenWidth}</pre>
<pre>useScreenHeight = height: {screenHeight}</pre>
<pre>useDocumentVisibility, is document visible: {isDocumentVisible ? 'yes' : 'no'}</pre>
</div>
);
}
License
See license.
1.0.7
8 months ago
1.0.6
1 year ago
1.0.5
1 year ago
1.0.4
2 years ago
1.0.3
2 years ago
1.0.2
2 years ago
1.0.1
2 years ago
0.0.14
3 years ago
0.0.13
3 years ago
0.0.10
3 years ago
0.0.11
3 years ago
0.0.12
3 years ago
0.0.9
3 years ago
0.0.8
3 years ago
0.0.7
3 years ago
0.0.6
3 years ago
0.0.5
3 years ago
0.0.4
3 years ago
0.0.3
3 years ago
0.0.2
3 years ago
0.0.1
3 years ago