{"id":13481613,"url":"https://github.com/zanonnicola/react-device-battery","last_synced_at":"2025-10-10T13:33:54.041Z","repository":{"id":65483264,"uuid":"104652620","full_name":"zanonnicola/react-device-battery","owner":"zanonnicola","description":"Notifies your React app of the device battery status","archived":false,"fork":false,"pushed_at":"2019-02-25T11:37:20.000Z","size":33,"stargazers_count":35,"open_issues_count":0,"forks_count":4,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-09-26T15:53:40.430Z","etag":null,"topics":["battery","javascript","react-component"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zanonnicola.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-09-24T14:59:15.000Z","updated_at":"2023-03-17T14:39:16.000Z","dependencies_parsed_at":"2023-01-25T11:15:27.578Z","dependency_job_id":null,"html_url":"https://github.com/zanonnicola/react-device-battery","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/zanonnicola/react-device-battery","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zanonnicola%2Freact-device-battery","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zanonnicola%2Freact-device-battery/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zanonnicola%2Freact-device-battery/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zanonnicola%2Freact-device-battery/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zanonnicola","download_url":"https://codeload.github.com/zanonnicola/react-device-battery/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zanonnicola%2Freact-device-battery/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279004060,"owners_count":26083667,"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","status":"online","status_checked_at":"2025-10-10T02:00:06.843Z","response_time":62,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["battery","javascript","react-component"],"created_at":"2024-07-31T17:00:53.378Z","updated_at":"2025-10-10T13:33:54.024Z","avatar_url":"https://github.com/zanonnicola.png","language":"JavaScript","funding_links":[],"categories":["Components"],"sub_categories":["Misc"],"readme":"# 🔋 React Device Battery\n\n\u003e 👀 In development\n\nNotifies your React app of the device battery status\n\nThis component is based on the [Battery Status API](https://developer.mozilla.org/en-US/docs/Web/API/Battery_Status_API)\n\n__The Battery Status API, more often referred to as the Battery API, provides information about the system's battery charge level and lets you be notified by events that are sent when the battery level or charging status change.__\n\n## Demo\n\n[![Edit react-battery](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/3kp5mjkj81)\n\n## :package: Installation\n\n```bash\nnpm install react-device-battery\n```\n\n## :rocket: Load\n\n```js\n// using es modules\nimport Battery from 'react-device-battery'\n\n// common.js\nconst Battery = require('react-device-battery')\n\n// AMD\n\n```\n\nOr use script tags and globals.\n\n```html\n\u003cscript src=\"https://unpkg.com/react-device-battery\"\u003e\u003c/script\u003e\n```\n\nAnd then grab it off the global like so:\n\n```js\nconst Battery = reactDeviceBattery\n```\n\n## :bulb: Usage\n\nLet's assume you want to check if you have enough battery before doing somenthing or you want to render based on how much battery you got left:\n\n```javascript\nconst App = () =\u003e (\n  \u003cdiv\u003e\n    \u003ch2\u003eMagic is happening ⚡️\u003c/h2\u003e\n    \u003cBattery \n      onChange={(battery ) =\u003e {\n        console.log(battery)\n      }}\n      render={({ battery }) =\u003e\n        \u003cp\u003eBattery Level: {battery ? battery : \u003cspan\u003eNot Supported\u003c/span\u003e}.\u003c/p\u003e\n      } \n    /\u003e\n  \u003c/div\u003e\n);\n\nrender(\u003cApp /\u003e, document.getElementById('root'));\n```\n\n\u003e If the Battery API is not supported, the render function is passed `null`.\n\n## Props\n\n#### `render` [required]\nDefault: `null`\n\nWhatever you'd like to render in response to changes in the battery level\n\n```javascript\n\u003cBattery \n  render={({ battery }) =\u003e\n    \u003cp\u003eBattery Level: {battery ? battery : \u003cspan\u003eNot Supported\u003c/span\u003e}.\u003c/p\u003e\n  } \n/\u003e\n```\n\n#### `onChange` [optional]\nDefault: `undefined`\n\nCalled whenever the batter level changes\n\n```javascript\nhandleBatteryChange = ({ battery }) =\u003e {\n  if (battery \u003c= 10) {\n    this.saveMyData(); // Oh my...\n  }\n}\n\n\u003cBattery \n  onChange={this.handleBatteryChange}\n  render={({ battery }) =\u003e\n    \u003cp\u003eBattery Level: {battery ? battery : \u003cspan\u003eNot Supported\u003c/span\u003e}.\u003c/p\u003e\n  } \n/\u003e\n```\n\n## Component info\n\nThis component has been built using `React Render Callback` pattern. Basically it is a way for the parent to provide some logic to the child, and the child have the control on how to execute that logic.\n\n## Legal\n\nReleased under MIT license.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzanonnicola%2Freact-device-battery","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzanonnicola%2Freact-device-battery","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzanonnicola%2Freact-device-battery/lists"}