{"id":20350004,"url":"https://github.com/webbestmaster/react-system-hook","last_synced_at":"2026-01-05T19:14:51.436Z","repository":{"id":57346083,"uuid":"391959254","full_name":"webbestmaster/react-system-hook","owner":"webbestmaster","description":"Several react hooks\\helpers to work with device's screen","archived":false,"fork":false,"pushed_at":"2024-09-24T21:56:16.000Z","size":224,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-11-06T21:06:43.335Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/webbestmaster.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"license","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-08-02T13:27:20.000Z","updated_at":"2024-09-24T21:56:20.000Z","dependencies_parsed_at":"2023-12-23T23:49:46.283Z","dependency_job_id":"9479d25d-eceb-43af-9946-d7e5195e4028","html_url":"https://github.com/webbestmaster/react-system-hook","commit_stats":{"total_commits":45,"total_committers":3,"mean_commits":15.0,"dds":0.5555555555555556,"last_synced_commit":"202a28ef2d57131f7490edf6aa3a3bcbb59f4f3f"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webbestmaster%2Freact-system-hook","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webbestmaster%2Freact-system-hook/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webbestmaster%2Freact-system-hook/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webbestmaster%2Freact-system-hook/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/webbestmaster","download_url":"https://codeload.github.com/webbestmaster/react-system-hook/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224701422,"owners_count":17355350,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-14T22:28:30.716Z","updated_at":"2026-01-05T19:14:46.412Z","avatar_url":"https://github.com/webbestmaster.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React System Hook\n\n[![GitHub license](https://img.shields.io/npm/l/react-system-hook)](https://github.com/webbestmaster/react-system-hook/blob/master/license)\n[![codecov](https://codecov.io/gh/webbestmaster/react-system-hook/branch/master/graph/badge.svg)](https://codecov.io/gh/webbestmaster/react-system-hook)\n[![npm version](https://img.shields.io/npm/v/react-system-hook.svg)](https://www.npmjs.com/package/react-system-hook)\n[![Known Vulnerabilities](https://snyk.io/test/github/webbestmaster/react-system-hook/badge.svg)](https://snyk.io/test/github/webbestmaster/react-system-hook)\n[![Dependency count](https://badgen.net/bundlephobia/dependency-count/react-system-hook)](https://libraries.io/npm/react-system-hook)\n[![npm bundle size](https://img.shields.io/bundlephobia/minzip/react-system-hook)](https://bundlephobia.com/package/react-system-hook)\n[![nodejs version](https://img.shields.io/node/v/react-system-hook)](https://nodejs.org/en/docs)\n[![Github CI](https://github.com/webbestmaster/react-system-hook/actions/workflows/github-ci.yml/badge.svg)](https://github.com/webbestmaster/react-system-hook/actions/workflows/github-ci.yml)\n[![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/webbestmaster/react-system-hook/github-ci.yml)](https://github.com/webbestmaster/react-system-hook/actions/workflows/github-ci.yml)\n[![Type definitions](https://img.shields.io/npm/types/react-system-hook)](https://www.typescriptlang.org)\n[![Website](https://img.shields.io/website?url=https://github.com/webbestmaster/react-system-hook)](https://github.com/webbestmaster/react-system-hook)\n[![CodeFactor](https://www.codefactor.io/repository/github/webbestmaster/react-system-hook/badge)](https://www.codefactor.io/repository/github/webbestmaster/react-system-hook)\n[![Package Quality](https://packagequality.com/shield/react-system-hook.svg)](https://packagequality.com/#?package=react-system-hook)\n[![GitHub stars](https://img.shields.io/github/stars/webbestmaster/react-system-hook?style=social)](https://github.com/webbestmaster/react-system-hook)\n\n\n\u003c!--\n[![Libraries.io dependency status for GitHub repo](https://img.shields.io/librariesio/github/webbestmaster/react-system-hook)](https://libraries.io/npm/react-system-hook)\n--\u003e\n\nSeveral hooks\\helpers to work with device's screen.\n\n## Install\n\n```bash\nnpm i react-system-hook\n```\n\n## Usage\n```typescript jsx\nimport {\n    useSystem,\n    useScreenHeight,\n    useScreenWidth,\n    useScreenSize,\n    useDocumentVisibility,\n    ScreenWidthNameEnum,\n    screenMinWidth, // object: Record\u003cScreenWidthNameEnum, number\u003e\n    getScreenName, // (screenWidth: number) =\u003e ScreenWidthNameEnum\n    getDocumentIsVisible, // () =\u003e boolean, it always returns `false` for server side rendering\n} from 'react-system-hook';\n\nexport function ExampleApp(): JSX.Element {\n    const {\n        screenInfo,\n        isBrowser, // true if running in browser, false for SSR\n    } = useSystem();\n\n    const {\n        devicePixelRatio, // number, default: 2, usually is 2 for smartphones\n        isLandscape, // true if width \u003e height\n        isMobile, // screen width \u003c 768\n        isPortrait, // opposite for isLandscape\n        name, // ScreenWidthNameEnum, relative from screen width: 'desktop', 'mobile' or 'tablet'\n        isTablet, // screen width \u003c 1024 and width \u003e= 768\n        isDesktop, // screen width \u003e= 1024\n    } = screenInfo;\n\n    const {\n        height, // number, default: 768\n        width, // number, default: 1024\n    } = useScreenSize();\n\n    const screenWidth = useScreenWidth(); // number, default: 1024\n    const screenHeight = useScreenHeight(); // number, default: 768\n\n    const isDocumentVisible = useDocumentVisibility(); // true or false\n\n    return (\n        \u003cdiv\u003e\n            \u003cpre\u003escreenInfo = {JSON.stringify(screenInfo, null, 4)}\u003c/pre\u003e\n            \u003cpre\u003e\n                useScreenSize = width: {height}, height: {width}\n            \u003c/pre\u003e\n            \u003cpre\u003euseScreenWidth = width: {screenWidth}\u003c/pre\u003e\n            \u003cpre\u003euseScreenHeight = height: {screenHeight}\u003c/pre\u003e\n            \u003cpre\u003euseDocumentVisibility, is document visible: {isDocumentVisible ? 'yes' : 'no'}\u003c/pre\u003e\n        \u003c/div\u003e\n    );\n}\n```\n\n## License\n\nSee [license](license).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebbestmaster%2Freact-system-hook","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwebbestmaster%2Freact-system-hook","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebbestmaster%2Freact-system-hook/lists"}