{"_id":"react-event-components","_rev":"84-3aa09e9cfae58305957ef249180e2b80","name":"react-event-components","dist-tags":{"latest":"1.1.0"},"versions":{"0.1.0":{"name":"react-event-components","version":"0.1.0","license":"MIT","_id":"react-event-components@0.1.0","maintainers":[{"name":"derekstavis","email":"dekestavis@gmail.com"}],"homepage":"http://pagarme.github.io/react-event-components","dist":{"shasum":"cefa38e17d4f814abf15be89079cc92e6035f51e","tarball":"https://registry.npmjs.org/react-event-components/-/react-event-components-0.1.0.tgz","integrity":"sha512-VlxrX/8oIH9EWJqhPMQa1AtqZZrBpExbOwQyZfMIoOgY7q1tZRgMkx/qL1pLuC2pF6nCp2Go8CCV3lrA/v/XCQ==","signatures":[{"sig":"MEUCIQDn2vYe32iaVKQDkyvT2hOQVAIMMP4xptxKjE+pFI5S8wIgflyIjbv/xJ4MrIWz+tTLovHh0FA2zjcNH/CI18NmaTA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"src/react-event-components/index.js","_from":".","_shasum":"cefa38e17d4f814abf15be89079cc92e6035f51e","gitHead":"b285ef8b89cf16b13841149c95acdc355348c253","scripts":{"test":"react-scripts test --env=jsdom","build":"react-scripts build","eject":"react-scripts eject","start":"react-scripts start","deploy":"npm run build && gh-pages -d ./build"},"_npmUser":{"name":"derekstavis","email":"dekestavis@gmail.com"},"_npmVersion":"3.10.3","description":"This set of components were designed as an idiomatic way of workign with global, raw keyboard input in React.","directories":{},"_nodeVersion":"6.7.0","dependencies":{"react":"^15.3.2","react-dom":"^15.3.2"},"devDependencies":{"gh-pages":"0.11.0","react-scripts":"0.7.0"},"_npmOperationalInternal":{"tmp":"tmp/react-event-components-0.1.0.tgz_1478360399444_0.022289411863312125","host":"packages-18-east.internal.npmjs.com"}},"0.1.1":{"name":"react-event-components","version":"0.1.1","license":"MIT","_id":"react-event-components@0.1.1","maintainers":[{"name":"derekstavis","email":"dekestavis@gmail.com"}],"homepage":"http://pagarme.github.io/react-event-components","bugs":{"url":"https://github.com/pagarme/react-event-components/issues"},"dist":{"shasum":"85c8744c30647dca348d4238b5dbdc1d42ff575f","tarball":"https://registry.npmjs.org/react-event-components/-/react-event-components-0.1.1.tgz","integrity":"sha512-R2iIr5BYuJsGPg6qbCYih2I6XvDzzM2pEisFc2SzhUUPZZPfSqZr92sOvsACF36Y6wu5fgwEptQpAiXBP88ftA==","signatures":[{"sig":"MEYCIQCS6DDmqy9qSuL1BS7NHkjb0uY2ySVMI6cnzaNx6HHxwwIhAJn2kOrdTtqTL9J6PwMs8mUWA2da//7K5UsrV8lBeXI8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"src/react-event-components/index.js","_from":".","_shasum":"85c8744c30647dca348d4238b5dbdc1d42ff575f","gitHead":"cbe95ecfc5901db70b26cd65857dffa40ee7f682","scripts":{"test":"react-scripts test --env=jsdom","build":"react-scripts build","eject":"react-scripts eject","start":"react-scripts start","deploy":"npm run build && gh-pages -d ./build"},"_npmUser":{"name":"derekstavis","email":"dekestavis@gmail.com"},"repository":{"url":"git+https://github.com/pagarme/react-event-components.git","type":"git"},"_npmVersion":"3.10.3","description":"A set of components designed as an idiomatic way of working with global, raw input (keyboard, mouse, touch, etc) in React.","directories":{},"_nodeVersion":"6.6.0","dependencies":{"react":"^15.3.2","react-dom":"^15.3.2"},"devDependencies":{"gh-pages":"0.11.0","react-scripts":"0.7.0"},"_npmOperationalInternal":{"tmp":"tmp/react-event-components-0.1.1.tgz_1478373692344_0.41667400673031807","host":"packages-12-west.internal.npmjs.com"}},"0.1.2":{"name":"react-event-components","version":"0.1.2","license":"MIT","_id":"react-event-components@0.1.2","maintainers":[{"name":"derekstavis","email":"dekestavis@gmail.com"}],"homepage":"http://pagarme.github.io/react-event-components","bugs":{"url":"https://github.com/pagarme/react-event-components/issues"},"dist":{"shasum":"8b45df22a335afacb6c2c6ae46182a34a894d424","tarball":"https://registry.npmjs.org/react-event-components/-/react-event-components-0.1.2.tgz","integrity":"sha512-kjePwcho/BsFoBl8x11sk7/Jl4NjpfkHRwZEYHBsNwMPRq+OVCRsVQuY+XZqBTkRg/simIQKHVgzFX+15LlTbQ==","signatures":[{"sig":"MEUCIGSHiJm0wKp4VLRYOPutr9Zf+iazWv90O+kgX28twNcvAiEA61R7k7oyL3xXxWjvlvlJm3inmYntfN4ZLG4j/e+J4CE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"src/react-event-components/index.js","_from":".","_shasum":"8b45df22a335afacb6c2c6ae46182a34a894d424","gitHead":"8fb760f40498dcf76e862f1da505ab2806693f5f","scripts":{"test":"react-scripts test --env=jsdom","build":"react-scripts build","eject":"react-scripts eject","start":"react-scripts start","deploy":"npm run build && gh-pages -d ./build"},"_npmUser":{"name":"derekstavis","email":"dekestavis@gmail.com"},"repository":{"url":"git+https://github.com/pagarme/react-event-components.git","type":"git"},"_npmVersion":"3.10.3","description":"A set of components designed as an idiomatic way of working with global, raw input (keyboard, mouse, touch, etc) in React.","directories":{},"_nodeVersion":"6.6.0","dependencies":{"react":"^15.3.2","react-dom":"^15.3.2"},"devDependencies":{"gh-pages":"0.11.0","react-scripts":"0.7.0"},"_npmOperationalInternal":{"tmp":"tmp/react-event-components-0.1.2.tgz_1478376852078_0.19484331621788442","host":"packages-18-east.internal.npmjs.com"}},"0.1.3":{"name":"react-event-components","version":"0.1.3","license":"MIT","_id":"react-event-components@0.1.3","maintainers":[{"name":"derekstavis","email":"dekestavis@gmail.com"}],"homepage":"http://pagarme.github.io/react-event-components","bugs":{"url":"https://github.com/pagarme/react-event-components/issues"},"dist":{"shasum":"2c620eb0a6d79ac329d78b9d0c9357c50c99b92e","tarball":"https://registry.npmjs.org/react-event-components/-/react-event-components-0.1.3.tgz","integrity":"sha512-r0hDu21yF49YoKP3TDOJZq4TsOwYTaSGloQVmht+/hrZsgwknTtkcancW5hTXBMWZ6eTbCz7mQ00sIUcTZzxQQ==","signatures":[{"sig":"MEYCIQD35BeC2IM4HN+0cHxOZp+iJ5Euat0DLV8vrf4yuoFniwIhANVFFuhxfyaGbuWEvYp/HAsTIss6Y84JNAxJeov064Zy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"src/react-event-components/index.js","_from":".","_shasum":"2c620eb0a6d79ac329d78b9d0c9357c50c99b92e","gitHead":"630270c8464e9e69655cc4b3625664d6dce61e82","scripts":{"test":"react-scripts test --env=jsdom","build":"react-scripts build","eject":"react-scripts eject","start":"react-scripts start","deploy":"npm run build && gh-pages -d ./build"},"_npmUser":{"name":"derekstavis","email":"dekestavis@gmail.com"},"repository":{"url":"git+https://github.com/pagarme/react-event-components.git","type":"git"},"_npmVersion":"3.10.3","description":"A set of components designed as an idiomatic way of working with global, raw input (keyboard, mouse, touch, etc) in React.","directories":{},"_nodeVersion":"6.6.0","dependencies":{"react":"^15.3.2","react-dom":"^15.3.2"},"devDependencies":{"gh-pages":"0.11.0","react-scripts":"0.7.0"},"_npmOperationalInternal":{"tmp":"tmp/react-event-components-0.1.3.tgz_1478397457350_0.37621052633039653","host":"packages-12-west.internal.npmjs.com"}},"0.1.4":{"name":"react-event-components","version":"0.1.4","license":"MIT","_id":"react-event-components@0.1.4","maintainers":[{"name":"derekstavis","email":"dekestavis@gmail.com"}],"homepage":"http://pagarme.github.io/react-event-components","bugs":{"url":"https://github.com/pagarme/react-event-components/issues"},"dist":{"shasum":"019b3ee1a8e1d021efc0a36851a76f9b3392712b","tarball":"https://registry.npmjs.org/react-event-components/-/react-event-components-0.1.4.tgz","integrity":"sha512-Z3bty6MjNVRhOBjTaW9LGXVZxlEKGNevS3ZJ5G300sojcoNs2ZeQwNBFfyYYTqsnNF8czaf1uhekF3LQGTlECA==","signatures":[{"sig":"MEUCIGK3nVNK85udfJtYoIYeqpYil+f6t+GwXzIjHXv1SCLxAiEAjg5I+Lic1iBwFmi/RTTw/YnjaVMJANlSQvSXtNqIdgE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"src/react-event-components/index.js","_from":".","_shasum":"019b3ee1a8e1d021efc0a36851a76f9b3392712b","gitHead":"9bc10266edf6bfce5589233fc699034767b687eb","scripts":{"test":"react-scripts test --env=jsdom","build":"react-scripts build","eject":"react-scripts eject","start":"react-scripts start","deploy":"npm run build && gh-pages -d ./build"},"_npmUser":{"name":"derekstavis","email":"dekestavis@gmail.com"},"repository":{"url":"git+https://github.com/pagarme/react-event-components.git","type":"git"},"_npmVersion":"3.10.3","description":"A set of components designed as an idiomatic way of working with global, raw input (keyboard, mouse, touch, etc) in React.","directories":{},"_nodeVersion":"6.6.0","dependencies":{"react":"^15.3.2","react-dom":"^15.3.2"},"devDependencies":{"gh-pages":"0.11.0","react-scripts":"0.7.0"},"_npmOperationalInternal":{"tmp":"tmp/react-event-components-0.1.4.tgz_1478407119823_0.8822898550424725","host":"packages-12-west.internal.npmjs.com"}},"0.1.6":{"name":"react-event-components","version":"0.1.6","license":"MIT","_id":"react-event-components@0.1.6","maintainers":[{"name":"pagarme","email":"opensource@pagar.me"}],"homepage":"http://pagarme.github.io/react-event-components","bugs":{"url":"https://github.com/pagarme/react-event-components/issues"},"dist":{"shasum":"ec73233527d9b4775f916041dee2de6ef9dc504c","tarball":"https://registry.npmjs.org/react-event-components/-/react-event-components-0.1.6.tgz","integrity":"sha512-AwP01nK/u5cwGNgyaAtz8S1xiGg2uLtA1bwWKmbg26BGeacT0OoPkHSKBF4Joe2EKLcbYKJy+I3P1Efa2taG9g==","signatures":[{"sig":"MEUCIB6lizPTyxSITdStcyGuS7mwDhZ5SssP9mN4DiM27ObVAiEA6bdJaR7YmdAXVdQ3jHPNjEhrk5KpvhyGoa84yBBhBSQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"src/react-event-components/index.js","_from":".","_shasum":"ec73233527d9b4775f916041dee2de6ef9dc504c","gitHead":"215a0dad34ee36a9d5a261d378ffabea7e5a901d","scripts":{"test":"react-scripts test --env=jsdom","build":"react-scripts build","eject":"react-scripts eject","start":"react-scripts start","deploy":"npm run build && gh-pages -d ./build"},"_npmUser":{"name":"pagarme","email":"opensource@pagar.me"},"repository":{"url":"git+https://github.com/pagarme/react-event-components.git","type":"git"},"_npmVersion":"3.10.3","description":"A set of components designed as an idiomatic way of working with global, raw input (keyboard, mouse, touch, etc) in React.","directories":{},"_nodeVersion":"6.6.0","dependencies":{"react":"^15.3.2","react-dom":"^15.3.2"},"devDependencies":{"gh-pages":"0.11.0","react-scripts":"0.7.0"},"_npmOperationalInternal":{"tmp":"tmp/react-event-components-0.1.6.tgz_1479313831121_0.0056294475216418505","host":"packages-18-east.internal.npmjs.com"}},"1.0.0":{"name":"react-event-components","version":"1.0.0","license":"MIT","_id":"react-event-components@1.0.0","maintainers":[{"name":"pagarme","email":"opensource@pagar.me"}],"homepage":"http://pagarme.github.io/react-event-components","bugs":{"url":"https://github.com/pagarme/react-event-components/issues"},"dist":{"shasum":"2a66cc7d5595dccbd134302c7b14fd2b43356932","tarball":"https://registry.npmjs.org/react-event-components/-/react-event-components-1.0.0.tgz","integrity":"sha512-gA1EMPuYfv+X3I9mLZ6KyTqlGyxyFA9kemJCDv9g9YnnhvPODZ/987BQXzVlKa1NGbnnvUSYgfZsdHYjWGONLg==","signatures":[{"sig":"MEYCIQCA6PS8q7hplcpLp8lcKTtTOOWG//mocuMZLCyjtfmB5QIhAKNPY1SWHyfKCT7DNH/RJ90gbGnUo/QHxk5ALC/0YJ/P","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"dist/react-event-components.js","_from":".","_shasum":"2a66cc7d5595dccbd134302c7b14fd2b43356932","gitHead":"99aa2917474b2309d4ce88381efdd40f8dc60ced","scripts":{"test":"react-scripts test --env=jsdom","build":"webpack --progress --colors","start":"react-scripts start","demo-build":"react-scripts build","prepublish":"npm run build && git diff --quiet","demo-deploy":"npm run demo-build && gh-pages -d ./build"},"_npmUser":{"name":"pagarme","email":"opensource@pagar.me"},"repository":{"url":"git+https://github.com/pagarme/react-event-components.git","type":"git"},"_npmVersion":"3.10.3","description":"A set of components designed as an idiomatic way of working with global, raw input (keyboard, mouse, touch, etc) in React.","directories":{},"_nodeVersion":"6.7.0","devDependencies":{"react":"15.3.2","webpack":"1.13.3","gh-pages":"0.11.0","react-dom":"15.3.2","react-scripts":"0.7.0"},"_npmOperationalInternal":{"tmp":"tmp/react-event-components-1.0.0.tgz_1480376496693_0.006823591887950897","host":"packages-18-east.internal.npmjs.com"}},"1.1.0":{"name":"react-event-components","version":"1.1.0","license":"MIT","_id":"react-event-components@1.1.0","maintainers":[{"name":"pagarme","email":"opensource@pagar.me"}],"homepage":"http://pagarme.github.io/react-event-components","bugs":{"url":"https://github.com/pagarme/react-event-components/issues"},"dist":{"shasum":"657df525a29d9480e3a0ac95dd2867fdeb3c760e","tarball":"https://registry.npmjs.org/react-event-components/-/react-event-components-1.1.0.tgz","integrity":"sha512-gprl7NCD1N9+zH3EPu10eIrCawT49Et9xTqoRq4Sfq5sB6K+nM7BOinlP9NAAgDZHCsOvj7PKZgG9wuB9dC26Q==","signatures":[{"sig":"MEYCIQDFW/xUwVzJQpxsoUqP4pZ693fGB+tLnhrCPWUFBfVsVAIhAOYrSx3ByesyAo+rK1974zLFQCEBTtsw4/bp/+ufBbWb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"dist/react-event-components.js","gitHead":"6a789a98c116c418fadf6d27cb1552de87ddb222","scripts":{"test":"react-scripts test --env=jsdom","build":"webpack --progress --colors","start":"react-scripts start","demo-build":"react-scripts build","prepublish":"npm run build","demo-deploy":"npm run demo-build && gh-pages -d ./build"},"_npmUser":{"name":"pagarme","email":"opensource@pagar.me"},"repository":{"url":"git+https://github.com/pagarme/react-event-components.git","type":"git"},"_npmVersion":"5.0.3","description":"[![Join the chat at https://gitter.im/pagarme/react-event-components](https://badges.gitter.im/pagarme/react-event-components.svg)](https://gitter.im/pagarme/react-event-components?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)","directories":{},"_nodeVersion":"8.1.4","devDependencies":{"react":"15.6.1","webpack":"3.0.0","gh-pages":"1.0.0","react-dom":"15.6.1","prop-types":"15.5.10","react-scripts":"1.0.8","html-webpack-plugin":"2.30.1"},"_npmOperationalInternal":{"tmp":"tmp/react-event-components-1.1.0.tgz_1507689615884_0.06317123328335583","host":"s3://npm-registry-packages"}}},"time":{"created":"2016-11-05T15:40:01.118Z","modified":"2026-08-08T02:12:29.324Z","0.1.0":"2016-11-05T15:40:01.118Z","0.1.1":"2016-11-05T19:21:32.570Z","0.1.2":"2016-11-05T20:14:15.609Z","0.1.3":"2016-11-06T01:57:37.591Z","0.1.4":"2016-11-06T04:38:40.051Z","0.1.6":"2016-11-16T16:30:33.347Z","1.0.0":"2016-11-28T23:41:38.680Z","1.1.0":"2017-10-11T02:40:16.021Z"},"bugs":{"url":"https://github.com/pagarme/react-event-components/issues"},"license":"MIT","homepage":"http://pagarme.github.io/react-event-components","repository":{"url":"git+https://github.com/pagarme/react-event-components.git","type":"git"},"description":"[![Join the chat at https://gitter.im/pagarme/react-event-components](https://badges.gitter.im/pagarme/react-event-components.svg)](https://gitter.im/pagarme/react-event-components?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)","maintainers":[{"email":"opensource@pagar.me","name":"pagarme-opensource"},{"email":"matheusvellone@gmail.com","name":"matheusvellone"},{"email":"marco.almeida.junior@gmail.com","name":"marquinhoalm"},{"email":"zignd.igor@gmail.com","name":"zignd"},{"email":"priscilla.ssilva@stone.com.br","name":"prifight"},{"email":"gabriel.pcosta@pagar.me","name":"gabrielpagarme"},{"email":"magno.moreira@pagar.me","name":"magnomoreira"},{"email":"andre.lsilva@pagar.me","name":"andre.lsilva"},{"email":"jean.cigoli@pagar.me","name":"cigoli"},{"email":"david.medeiros@pagar.me","name":"davidsmedeiros"},{"email":"gabriela.leone@pagar.me","name":"gabilleone"},{"email":"geraldo.neto@pagar.me","name":"geraldofada-pagarme"},{"email":"andre.amedeiros@pagar.me","name":"asamedeirospagarme"},{"email":"rpsantos@stone.com.br","name":"rpsantos1987"},{"email":"jtorres@stone.com.br","name":"jonasnt17"},{"email":"nathalia.moliveira@stone.com.br","name":"nathaliacrelier"},{"email":"bruno.mduarte@stone.com.br","name":"bruno.mduarte"},{"email":"jeferson.augusto@pagar.me","name":"jeferson.augusto"}],"readme":"# React Event Components\n\n[![Join the chat at https://gitter.im/pagarme/react-event-components](https://badges.gitter.im/pagarme/react-event-components.svg)](https://gitter.im/pagarme/react-event-components?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)\n\nA set of components designed as an idiomatic way of working\nwith global, raw input (keyboard, mouse, touch, etc) in React.\n\n## Example\n\nA live demo can be found at https://pagarme.github.io/react-event-components\n\n## Install\n\n```\nyarn add react-event-components\n```\n\nor\n\n```\nnpm install react-event-components --save\n```\n\n## Usage\n\n### Key Events\n\nCall the handler everytime a key event happen.\n\n```jsx\nimport { KeyDown } from './react-event-components'\nimport React, { Component } from 'react'\n\nexport default class KeyDownExample extends Component {\n constructor() {\n super()\n this.state = {\n x: 0,\n y: 0,\n totalTime: 0,\n color: 'rgb(0,0,0)',\n lastKeyPressed: 'None'\n }\n }\n\n move(position) {\n this.setState(position)\n }\n\n render() {\n const {x, y, color} = this.state\n return (\n
\n

Total time: {Math.floor(this.state.totalTime * 100)/100}

\n

Last key pressed: {this.state.lastKeyPressed}

\n\n

\n Try WASD or QEZC\n

\n\n this.setState({ lastKeyPressed: key })} />\n this.move({ y: y - 10 })} />\n this.move({ x: x - 10 })} />\n this.move({ y: y + 10 })} />\n this.move({ x: x + 10 })} />\n this.move({ x: x - 10, y: y - 10})} />\n this.move({ x: x + 10, y: y - 10})} />\n this.move({ x: x - 10, y: y + 10})} />\n this.move({ x: x + 10, y: y + 10})} />\n
\n )\n }\n}\n```\n\n### Timer Events\n\nRuns a function recurrently. Passes the delta time to handler.\n\n```jsx\nimport React, { Component } from 'react'\nimport { Every } from './react-event-components'\n\nexport default class EveryExample extends Component {\n constructor() {\n super()\n this.state = {\n totalTime: 0,\n color: 'rgb(0,0,0)'\n }\n }\n\n handleTotalTime(dt) {\n const totalTime = this.state.totalTime + dt\n this.setState({\n totalTime: totalTime,\n displayTime: Math.floor(totalTime * 100)/100\n })\n }\n\n handleColor() {\n const randomHex = () => Math.round(Math.random() * 255)\n this.setState({\n color: `rgb(${randomHex()},${randomHex()},${randomHex()})`\n })\n }\n\n render() {\n return (\n
\n

Total time: { this.state.displayTime }

\n\n this.handleTotalTime(dt)} />\n this.handleColor()} />\n
\n )\n }\n}\n```\n\n## DeviceOrientation\n\nCall do property every time device orientation changes\n\n```jsx\nimport React, {Component} from 'react'\nimport {DeviceOrientation} from './react-event-components'\n\nexport default class DeviceOrientationExample extends Component {\n constructor() {\n super()\n this.state = {\n deviceOrientation: {}\n }\n }\n\n handleDeviceOrientation = ({beta, gamma, alpha, absolute}) => {\n this.setState({\n deviceOrientation: {\n beta,\n gamma,\n alpha,\n absolute\n }\n })\n }\n\n render() {\n return (\n
\n \n\n

DeviceOrientation

\n\n

\n beta: {this.state.deviceOrientation.beta}\n
\n gamma: {this.state.deviceOrientation.gamma}\n
\n alpha: {this.state.deviceOrientation.alpha}\n
\n absolute: {this.state.deviceOrientation.absolute}\n

\n
\n )\n }\n}\n```\n\n## WindowResize\n\nTriggered when the user resizes the window, it can be called when the user changes the orientation from portrait to landscape.\n\n```jsx\nimport React, { Component } from 'react'\nimport { WindowResize } from './react-event-components'\n\nexport default class WindowResizeExample extends Component {\n constructor() {\n super()\n this.state = {\n title: 'Resize Your Window',\n innerWidth: window.innerWidth\n }\n }\n\n handleWindowResize(window) {\n this.setState(Object.assign({}, this.state, {\n innerWidth: window.innerWidth\n }))\n }\n\n render() {\n return (\n
\n \n\n

{this.state.title} {this.state.innerWidth}px

\n
\n )\n }\n}\n```\n\n## Battery Status\n\nIt will give you the battery status of the user API, if it is available\n\n```jsx\nimport { BatteryStatus } from './react-event-components'\nimport React, { Component } from 'react'\n\nexport default class BatteryStatusExample extends Component {\n constructor() {\n super()\n this.state = { }\n }\n\n render() {\n const {\n charging,\n chargingTime,\n dischargingTime,\n level\n } = this.state\n\n return (\n
\n \n\n

BatteryStatus

\n
charging: {charging}
\n
chargingTime: {chargingTime}
\n
level: {level}%
\n
\n )\n }\n\n handleBatteryChange (battery) {\n this.setState({ ...battery })\n }\n}\n\n```\n","readmeFilename":"README.md","users":{"bobthegeek":true}}