{"id":13450497,"url":"https://github.com/jorisre/react-screen-wake-lock","last_synced_at":"2025-04-04T11:16:04.614Z","repository":{"id":37099778,"uuid":"312112202","full_name":"jorisre/react-screen-wake-lock","owner":"jorisre","description":"🌓 React implementation of the Screen Wake Lock API. It provides a way to prevent devices from dimming or locking the screen when an application needs to keep running","archived":false,"fork":false,"pushed_at":"2025-03-12T11:08:06.000Z","size":1579,"stargazers_count":74,"open_issues_count":2,"forks_count":3,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-28T10:08:57.296Z","etag":null,"topics":["react","screen-wake-lock","wakelock"],"latest_commit_sha":null,"homepage":"https://react-screen-wake-lock.vercel.app/","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/jorisre.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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},"funding":{"github":["jorisre"]}},"created_at":"2020-11-11T23:07:01.000Z","updated_at":"2025-03-22T05:09:39.000Z","dependencies_parsed_at":"2022-06-24T11:53:49.412Z","dependency_job_id":"84dc012e-b45c-4a06-8849-4387710d1681","html_url":"https://github.com/jorisre/react-screen-wake-lock","commit_stats":{"total_commits":228,"total_committers":4,"mean_commits":57.0,"dds":0.381578947368421,"last_synced_commit":"492a7d830de9e7ae88cb996527ab652dfa58f12f"},"previous_names":[],"tags_count":18,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jorisre%2Freact-screen-wake-lock","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jorisre%2Freact-screen-wake-lock/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jorisre%2Freact-screen-wake-lock/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jorisre%2Freact-screen-wake-lock/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jorisre","download_url":"https://codeload.github.com/jorisre/react-screen-wake-lock/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247166169,"owners_count":20894654,"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":["react","screen-wake-lock","wakelock"],"created_at":"2024-07-31T07:00:35.274Z","updated_at":"2025-04-04T11:16:04.609Z","avatar_url":"https://github.com/jorisre.png","language":"TypeScript","funding_links":["https://github.com/sponsors/jorisre"],"categories":["Packages"],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\u003ch1\u003e🌗 react-screen-wake-lock\u003c/h1\u003e\u003c/div\u003e\n\u003cp align=\"center\"\u003e\nTiniest React implementation of the Screen Wake Lock API. \u003cbr/\u003eIt provides a way to prevent devices from dimming or locking the screen when an application needs to keep running.\n\u003c/p\u003e\n\n\u003cbr /\u003e\n\u003cp align=\"center\"\u003e\n\u003ca href=\"https://react-screen-wake-lock.vercel.app/\"\u003eDemo\u003c/a\u003e \n\u003cspan\u003e · \u003c/span\u003e\n  \u003ca href=\"https://github.com/jorisre/react-screen-wake-lock#installation\"\u003eDocumentation\u003c/a\u003e \n\u003cspan\u003e · \u003c/span\u003e\n\u003ca href=\"https://twitter.com/_jorisre\"\u003eTwitter\u003c/a\u003e\n  \u003csub\u003eCreated by \u003ca href=\"https://joris.re\"\u003eJoris\u003c/a\u003e\u003c/sub\u003e\n\u003c/p\u003e\n\n## Features\n\n- 🌐 Follows the **[W3C Screen Wake Lock API specifications](https://w3c.github.io/screen-wake-lock/)**\n- 🪝 **Easy to use** - Just one react hook `useWakeLock`\n- 🪶 **Lightweight \u0026 0 Dependency** - _Less than **[650b](https://bundlephobia.com/result?p=react-screen-wake-lock)**_\n- 🔌 **Easily integration** - _It works without additional configuration (React, remix, Next.js...)_\n- 🧪 **Ready to test** - Mocks the Screen Wake Lock with [Jest](https://github.com/jorisre/jest-wake-lock-mock#readme)\n- ⚠️ **Browser Support** - [Screen Wake Lock API](https://caniuse.com/wake-lock)\n\n\u003cdetails\u003e\n    \u003csummary\u003e \u003ccode\u003ereact-screen-wake-lock\u003c/code\u003e use native Screen Wake Lock API under the hood which is not supported by all browsers.\u003c/summary\u003e\n    \u003ca href=\"https://caniuse.com/wake-lock\"\u003e\n      \u003cpicture\u003e\n        \u003csource type=\"image/webp\" srcset=\"https://caniuse.bitsofco.de/image/wake-lock.webp\" width=\"600px\"\u003e\n        \u003csource type=\"image/png\" srcset=\"https://caniuse.bitsofco.de/image/wake-lock.png\" width=\"600px\"\u003e\n        \u003cimg src=\"https://caniuse.bitsofco.de/image/wake-lock.jpg\" alt=\"Data on support for the wake-lock feature across the major browsers from caniuse.com\" width=\"600px\"\u003e\n      \u003c/picture\u003e\n    \u003c/a\u003e\n\u003c/details\u003e\n\n### Examples (\u003ca href=\"https://react-screen-wake-lock.joris.re\"\u003eDemo\u003c/a\u003e)\n\n- [Basic](https://github.com/jorisre/react-screen-wake-lock#usage)\n- [Demo example](https://github.com/jorisre/react-screen-wake-lock/blob/main/example/src/App.tsx)\n\n## Installation\n\n```sh\nyarn add react-screen-wake-lock\n```\n\nor\n\n```sh\nnpm i react-screen-wake-lock\n```\n\n## Usage\n\n```tsx\nimport { useWakeLock } from 'react-screen-wake-lock';\n\nfunction Component() {\n  const { isSupported, released, request, release } = useWakeLock({\n    onRequest: () =\u003e alert('Screen Wake Lock: requested!'),\n    onError: () =\u003e alert('An error happened 💥'),\n    onRelease: () =\u003e alert('Screen Wake Lock: released!'),\n    reacquireOnPageVisible: true,\n  });\n\n  return (\n    \u003cdiv\u003e\n      \u003cp\u003e\n        Screen Wake Lock API supported: \u003cb\u003e{`${isSupported}`}\u003c/b\u003e\n        \u003cbr /\u003e\n        Released: \u003cb\u003e{`${released}`}\u003c/b\u003e\n      \u003c/p\u003e\n      \u003cbutton type=\"button\" onClick={() =\u003e (released === false ? release() : request())}\u003e\n        {released === false ? 'Release' : 'Request'}\n      \u003c/button\u003e\n    \u003c/div\u003e\n  );\n}\n\nexport default Component;\n```\n\n## Props\n\n|           Prop           |                          description                          |   default   | required |\n| :----------------------: | :-----------------------------------------------------------: | :---------: | :------: |\n|       `onRequest`        |      called on successfully `navigator.wakeLock.request`      | `undefined` |  false   |\n|        `onError`         | called when caught an error from `navigator.wakeLock.request` | `undefined` |  false   |\n|       `onRelease`        |               called when wake lock is released               | `undefined` |  false   |\n| `reacquireOnPageVisible` | Reacquires the wake lock when the page becomes visible again  |   `false`   |  false   |\n\n### Returns\n\n|     Prop      |                                      description                                      |   type   |           |\n| :-----------: | :-----------------------------------------------------------------------------------: | :------: | --------- |\n| `isSupported` |                     Browser support for the Screen Wake Lock API                      | boolean  |\n|  `released`   | Once WakeLock is released, `released` become `true` and the value never changes again | boolean  | undefined |\n|   `request`   |        Returns a promise which allows control over screen dimming and locking         | function |\n|   `release`   |  Returns a promise that is resolved once the sentinel has been successfully released  | function |\n\n## Testing\n\nTo write tests with ease, follow this [guide](https://github.com/jorisre/jest-wake-lock-mock#readme)\n\n## Author\n\n**🌈 [Joris](https://github.com/jorisre)** · [@\\_jorisre](https://twitter.com/_jorisre)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjorisre%2Freact-screen-wake-lock","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjorisre%2Freact-screen-wake-lock","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjorisre%2Freact-screen-wake-lock/lists"}