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' export default class KeyDownExample extends Component { constructor() { super() this.state = { x: 0, y: 0, totalTime: 0, color: 'rgb(0,0,0)', lastKeyPressed: 'None' } } move(position) { this.setState(position) } render() { const {x, y, color} = this.state return ( <div> <p>Total time: {Math.floor(this.state.totalTime * 100)/100}</p> <p>Last key pressed: {this.state.lastKeyPressed}</p> <h1 style={{ transform: `translate(${x}px, ${y}px)`, color: color }}> Try WASD or QEZC </h1> <KeyDown when="*" do={(key) => this.setState({ lastKeyPressed: key })} /> <KeyDown when="w" do={() => this.move({ y: y - 10 })} /> <KeyDown when="a" do={() => this.move({ x: x - 10 })} /> <KeyDown when="s" do={() => this.move({ y: y + 10 })} /> <KeyDown when="d" do={() => this.move({ x: x + 10 })} /> <KeyDown when="q" do={() => this.move({ x: x - 10, y: y - 10})} /> <KeyDown when="e" do={() => this.move({ x: x + 10, y: y - 10})} /> <KeyDown when="z" do={() => this.move({ x: x - 10, y: y + 10})} /> <KeyDown when="c" do={() => this.move({ x: x + 10, y: y + 10})} /> </div> ) } }Timer Events
Runs a function recurrently. Passes the delta time to handler.
import React, { Component } from 'react' import { Every } from './react-event-components' export default class EveryExample extends Component { constructor() { super() this.state = { totalTime: 0, color: 'rgb(0,0,0)' } } handleTotalTime(dt) { const totalTime = this.state.totalTime + dt this.setState({ totalTime: totalTime, displayTime: Math.floor(totalTime * 100)/100 }) } handleColor() { const randomHex = () => Math.round(Math.random() * 255) this.setState({ color: `rgb(${randomHex()},${randomHex()},${randomHex()})` }) } render() { return ( <div> <p style={{ color: this.state.color }}>Total time: { this.state.displayTime }</p> <Every frame do={(dt) => this.handleTotalTime(dt)} /> <Every s="1" ms="500" do={() => this.handleColor()} /> </div> ) } }DeviceOrientation
Call do property every time device orientation changes
import React, {Component} from 'react' import {DeviceOrientation} from './react-event-components' export default class DeviceOrientationExample extends Component { constructor() { super() this.state = { deviceOrientation: {} } } handleDeviceOrientation = ({beta, gamma, alpha, absolute}) => { this.setState({ deviceOrientation: { beta, gamma, alpha, absolute } }) } render() { return ( <div> <DeviceOrientation do={this.handleDeviceOrientation} /> <h2>DeviceOrientation</h2> <p> beta: {this.state.deviceOrientation.beta} <br /> gamma: {this.state.deviceOrientation.gamma} <br /> alpha: {this.state.deviceOrientation.alpha} <br /> absolute: {this.state.deviceOrientation.absolute} </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' export default class WindowResizeExample extends Component { constructor() { super() this.state = { title: 'Resize Your Window', innerWidth: window.innerWidth } } handleWindowResize(window) { this.setState(Object.assign({}, this.state, { innerWidth: window.innerWidth })) } render() { return ( <div> <WindowResize do={this.handleWindowResize.bind(this)} /> <p>{this.state.title} {this.state.innerWidth}px</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' export default class BatteryStatusExample extends Component { constructor() { super() this.state = { } } render() { const { charging, chargingTime, dischargingTime, level } = this.state return ( <section> <BatteryStatus do={this.handleBatteryChange.bind(this)} /> <h2>BatteryStatus</h2> <div>charging: {charging}</div> <div>chargingTime: {chargingTime}</div> <div>level: {level}%</div> </section> ) } handleBatteryChange (battery) { this.setState({ ...battery }) } } 
