pagarme / React Event Components
Licence: mit
🛰 A set of React components designed to handle global events (interval, keyboard, touch, mouse, etc)
Stars: ✭ 271
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Event Components
Inputsystem
An efficient and versatile input system for Unity.
Stars: ✭ 1,013 (+273.8%)
Mutual labels: keyboard, mouse, touch
Pancake
Lightweight, Fast, Easy-to-use HTML5 2D game framework!
Stars: ✭ 79 (-70.85%)
Mutual labels: keyboard, touch, mouse
hotscript
HotScript - Revolutionizing how Windows works.
Stars: ✭ 29 (-89.3%)
Mutual labels: keyboard, mouse
creviceapp
Multi purpose utility which supports gestures with mouse and keyboard.
Stars: ✭ 22 (-91.88%)
Mutual labels: keyboard, mouse
gesto
You can set up drag, pinch events in any browser.
Stars: ✭ 47 (-82.66%)
Mutual labels: touch, mouse
rasp vusb
This repo explains how to turn your Raspberry Pi Zero into USB Keyboard and Mouse. Also provides sample code and binaries to control them.
Stars: ✭ 85 (-68.63%)
Mutual labels: keyboard, mouse
input-event
🎹 Read and parse input device(like mouse, keyboard, joystick and IR-Remote)'s event data.
Stars: ✭ 45 (-83.39%)
Mutual labels: keyboard, mouse
intuiter
Global productivity app for anyone who use Windows
Stars: ✭ 24 (-91.14%)
Mutual labels: keyboard, mouse
SerialProxy
🖱️⌨️ Arduino Input Proxying for PC (.NET Core)
Stars: ✭ 39 (-85.61%)
Mutual labels: keyboard, mouse
uchroma
An advanced driver for Razer Chroma hardware in Linux
Stars: ✭ 45 (-83.39%)
Mutual labels: keyboard, mouse
Ayase
🥥 Control everything by keyboard. Built for hackers and the blind.
Stars: ✭ 53 (-80.44%)
Mutual labels: keyboard, mouse
habits
An application to monitor your habits with your PC. So you can study how many kilometers travel with your mouse or how many keystrokes.
Stars: ✭ 19 (-92.99%)
Mutual labels: keyboard, mouse
KeyLy
A powerfull and awesome Keylogger(Your keyboard and your mouse) realy helpfull for hackers! :-P (C/C++)
Stars: ✭ 17 (-93.73%)
Mutual labels: keyboard, mouse
LowLevelInput.Net
A thread safe and event driven LowLevelMouse and LowLevelKeyboard Hook
Stars: ✭ 32 (-88.19%)
Mutual labels: keyboard, mouse
keyboard mouse emulate on raspberry
Bluetooth Keyboard Mouse Emulator on Raspberry Pi
Stars: ✭ 230 (-15.13%)
Mutual labels: keyboard, mouse
snake
A stylised graphical tool for configuring and controlling Razer devices on Linux
Stars: ✭ 52 (-80.81%)
Mutual labels: keyboard, mouse
YetAnotherKeyDisplayer
The application for displaying pressed keys of the keyboard
Stars: ✭ 88 (-67.53%)
Mutual labels: keyboard, mouse
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 })
}
}
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].