https://github.com/hoppula/react-device-events

Provides React HoCs for DeviceOrientation & DeviceMotion events
https://github.com/hoppula/react-device-events

Last synced: over 1 year ago
JSON representation

Provides React HoCs for DeviceOrientation & DeviceMotion events

• Host: GitHub
• URL: https://github.com/hoppula/react-device-events
• Owner: hoppula
• Created: 2016-01-13T14:54:57.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2016-01-13T14:58:32.000Z (over 10 years ago)
• Last Synced: 2025-01-13T16:50:40.046Z (over 1 year ago)
• Language: JavaScript
• Size: 1.95 KB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# react-device-events

> Provides React higher order components for [DeviceOrientationEvent](https://developer.mozilla.org/en-US/docs/Web/API/DeviceOrientationEvent) and [DeviceMotionEvent](https://developer.mozilla.org/en-US/docs/Web/API/DeviceMotionEvent)

Your wrapped component gets re-rendered after any `deviceorientation` or `devicemotion` event.

## Installation

`npm install -S react-device-events`

## Usage

### DeviceOrientation

```

import React from 'react'

import { deviceOrientation } from 'react-device-events'

class OrientationComponent extends React.Component {

  render() {

    const { supported, gamma, beta, alpha, orientation} = this.props.deviceOrientation

    return (

      


        


Supported: {supported ? "true" : "false"}

        


Gamma: {gamma}

        


Beta: {beta}

        


Alpha: {alpha}

        


Orientation: {orientation}

      

    )

  }

}


export default deviceOrientation(OrientationComponent)

```

### DeviceMotion

```

import React from 'react'

import { deviceMotion } from 'react-device-events'

class MotionComponent extends React.Component {

  render() {

    const { supported, acceleration, accelerationIncludingGravity, rotationRate, interval } = this.props.deviceMotion

    const [accelerationX, accelerationY, accelerationZ] = acceleration || []

    const [gravityX, gravityY, gravityZ] = accelerationIncludingGravity || []

    const [alpha, beta, gamma] = rotationRate || []

    return (

      


        


Supported: {supported ? "true" : "false"}

        


Acceleration: {accelerationX} {accelerationY} {accelerationZ}

        


Acceleration including gravity: {gravityX} {gravityY} {gravityZ}

        


Rotation rate: {alpha} {beta} {gamma}

        


Interval: {interval}

      

    )

  }

}


export default deviceMotion(MotionComponent)

```

## License

MIT