react-event-components
v1.1.0
Published
[![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)
Downloads
148
Maintainers
Keywords
Readme
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 })
}
}