0.1.1 ā€¢ Published 3 years ago

devshock v0.1.1

Weekly downloads
-
License
MIT
Repository
-
Last release
3 years ago

GitHub package.json version CircleCI GitHub GitHub last commit GitHub tag (latest by date)

šŸ“±šŸ”Ø Device Shock Detector

The simple module to detect device shocks like side bump or knock. It uses Motion API and only works in browsers.

There is many use-cases to make your site/app more interactive and featured. Several cases for example:

  • Knock to send feedback
  • Bump to pair
  • Knock to the back to make smth (open chat, move back and so on)

DevShock Mobile Example

šŸ“¦ Installation

šŸˆ With yarn:

yarn add devshock

šŸ›  With npm:

npm install devshock

šŸ— Build & Try

Navigate to GitHub Pages hosted example.
It's better to use your smartphone, so it has accelerometer.

This project written with TypeScript and it better to use it in projects built with some assembly systems like Webpack or Gulp.

Anyway, you can build it and use it as a single js file with:

yarn build

So you'll get a dist folder with devshock.js which can be integrated in your project as raw js lib.

To test the lib use next command and follow to https://<internal_ip>:8080 from your mobile device:

yarn serve

šŸ“‘ Usage

TypeScript:

import DevShock, { ShockEventData } from 'devshock'

const dshock = new DevShock()
if (dshock.available())
    dshock.addListener('shock', (ev: ShockEventData) => {
        console.log(ev)
        // { timeStamp: 1620159608431, side: 'left', force: 23 }
    })

JavaScript:

<script src="https://raw.githubusercontent.com/jkulvich/devshock/main/docs/devshock.js"></script>
const dshock = new DevShock()
if (dshock.available())
    dshock.addListener('shock', ev => {
        console.log(ev)
        // { timeStamp: 1620159608431, side: 'left', force: 23 }
    })