react-event-components

🛰 A set of React components designed to handle global events (interval, keyboard, touch, mouse, etc)

Showing:

Popularity

Downloads/wk

2

GitHub Stars

273

Maintenance

Last Commit

4yrs ago

Contributors

11

Package

Dependencies

0

License

MIT

Type Definitions

Tree-Shakeable

No?

Readme

React Event Components

Join the chat at https://gitter.im/pagarme/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 })
  }
}

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Tutorials

No tutorials found
Add a tutorial