React Event Components
A set of components designed as an idiomatic way of working with global, raw input (keyboard, mouse, touch, etc) in React.
Example
A live demo can be found at https://pagarme.github.io/react-event-components
Install
yarn add react-event-components
or
npm install react-event-components --save
Usage
Key Events
Call the handler everytime a key event happen.
import KeyDown from './react-event-components'import React Component from 'react' { thisstate = x: 0 y: 0 totalTime: 0 color: 'rgb(0,0,0)' lastKeyPressed: 'None' } { this } { const x y color = thisstate return <div> <p>Total time: Math/100</p> <p>Last key pressed: thisstatelastKeyPressed</p> <h1 => Try WASD or QEZC </h1> <KeyDown ="*" = /> <KeyDown ="w" = /> <KeyDown ="a" = /> <KeyDown ="s" = /> <KeyDown ="d" = /> <KeyDown ="q" = /> <KeyDown ="e" = /> <KeyDown ="z" = /> <KeyDown ="c" = /> </div> }
Timer Events
Runs a function recurrently. Passes the delta time to handler.
import React Component from 'react'import Every from './react-event-components' { thisstate = totalTime: 0 color: 'rgb(0,0,0)' } { const totalTime = thisstatetotalTime + dt this } { const randomHex = Math this } { return <div> <p =>Total time: thisstatedisplayTime </p> <Every = /> <Every ="1" ="500" = /> </div> }
DeviceOrientation
Call do property every time device orientation changes
import React Component from 'react'import DeviceOrientation from './react-event-components' { thisstate = deviceOrientation: } { this } { return <div> <DeviceOrientation = /> <h2>DeviceOrientation</h2> <p> beta: thisstatedeviceOrientationbeta <br /> gamma: thisstatedeviceOrientationgamma <br /> alpha: thisstatedeviceOrientationalpha <br /> absolute: thisstatedeviceOrientationabsolute </p> </div> }
WindowResize
Triggered when the user resizes the window, it can be called when the user changes the orientation from portrait to landscape.
import React Component from 'react'import WindowResize from './react-event-components' { thisstate = title: 'Resize Your Window' innerWidth: windowinnerWidth } { this } { return <div> <WindowResize = /> <p>thisstatetitle thisstateinnerWidthpx</p> </div> }
Battery Status
It will give you the battery status of the user API, if it is available
import BatteryStatus from './react-event-components'import React Component from 'react' { thisstate = } { const charging chargingTime dischargingTime level } = thisstate return <section> <BatteryStatus = /> <h2>BatteryStatus</h2> <div>charging: charging</div> <div>chargingTime: chargingTime</div> <div>level: level%</div> </section> { this }}