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