Lesca-sensor-orientation NPM

Why use it?

full steps for get mobile 3 axis value of mobile orientation.

See https://developer.mozilla.org/en-US/docs/Web/Events/Detecting_device_orientation for a demonstration!

Live Demo

Installation

npm install lesca-sensor-orientation --save

Usage

As a Node module:

import { useState, useEffect, useMemo } from 'react';
import Orientation from 'lesca-sensor-orientation';

// (1) waiting for permission => Must be user-triggered event and SSL required
// (2) add addEventListener
const Components = () => {
  const [state, setState] = useState(false);
  const orientation = useMemo(() => new Orientation(), []);

  const require_permission = () => {
    orientation
      .permission()
      .then(() => {
        // permission granted
        setState(true);
      })
      .catch(() => {
        // permission deined
      });
  };

  useEffect(() => {
    if (state) {
      orientation.addEventListener((e) => {
        alert(e);
      });
    }
    return () => {
      orientation.destory();
    };
  }, [state]);

  return <button onClick={require_permission}></button>;
};