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>;
};

Development

Methods

Methods

| method | description | return | | :---------------------------------------- | :------------------------: | -----: | | .permission() | ask user permission | void | | addEventListener(callback:function) | get 3 axis value each time | void | | .destory() | destory event | void |

Properties

| Properties | description | default | | :---------------------- | :--------------------------: | --------------: | | disable:boolean | stop / continue event listen | true | | isSuppord:boolean | permission granted or deined | (read only) |

Features

• TypeScript
• maintain if necessary