react-motion-shake

React component used to detect motion and shake interaction

Usage no npm install needed!

<script type="module">
  import reactMotionShake from 'https://cdn.skypack.dev/react-motion-shake';
</script>

README

react-motion-shake

DESCRIPTION

React component for tracking device motion and detecting shakeing

REQUIREMENTS

React v16.8.0 or higher - Created using useState and useEffect hooks.

USE EXAMPLE

  • Import dependency
  • Create your listener function and use in motionListener prop
  • For shake detection, set useShake to true and include a function that fires when a shake is detected.
import React, { useState } from 'react';
import Motion from 'react-motion-shake';

const SomeComponenet = () => {

  const motionListener = (x, y, z) => {
    // Do something with acceleration x, y, z
  }

  const shakeListener = () => {
    // Called when shake is detected.
  }

  return (
    <div>
      <Motion
        motionListener={motionListener}
        useShake={true}
        shakeListener={shakeListener} />
    </div>
  )
}

export default SomeComponenet;

Additional PROPS

  • useGravity: (bool) Whether to account for gravity or not. Default: false
  • detectShake: (bool) Whether to detect shake actions. Default: false
  • shakeThreshold: (number) Controls the speed required when shaking, calculated as the difference between max/min acceleration values. Default: 15
  • shakeVibrationTime: (number) Controls the vibration duration when a shake is detected in milliseconds. Default: 50
  • shakeResetTime: (number) Controls how often a shake can be detected in ms. Default: 750
  • motionListener: (function) Required! Listens to acceleration values
  • shakeListener: (function) Required if useShake is true. Function to be called when a shake is detected.