WC3 Sensors in React Web

Question

I'm trying to get W3C Sensors API working inside my React Web App (Not React Native), basically I cannot find any reliable documentation for getting it to work using javascript, this is the code I produced so far:

  import React, { Component } from "react";

  export default class Postion extends Component {
  state = {
    message: "not supported",
  };
  componentDidMount() {
    this.test();
  }

  test(){
    if(window.Accelerometer){
        this.setState({message:"supported"})
    }
  }

  render() {
    return <div>{this.state.message}</div>;
  }
}

It displays "supported" on desktop browsers and "not supported" on all the mobile browser I tried so far, so my question is: how can I get data from the accelerometer using the sensors API (especially on mobile browsers)? I can even be done? Thanks.

score 0 · Answer 1 · answered May 10 '20 at 12:56

0

I haven't used it yet. But there's nice documentation always on MDN:

let acl = new Accelerometer({frequency: 60});

acl.addEventListener('reading', () => {
  console.log("Acceleration along the X-axis " + acl.x);
  console.log("Acceleration along the Y-axis " + acl.y);
  console.log("Acceleration along the Z-axis " + acl.z);
});

acl.start();

Now, to implement it on React, you know the deal. Just need to hook in componentDidMount hook.

answered May 10 '20 at 12:56

Bhojendra Rauniyar

83,432
35
168
231

1

Hi and thanks for your comment, I've allready tried this solution, but I keep getting "Accellerometer is not defined", since I'm not that familiar with hooks can you please provide me a working example? Thanks. – Giulio Serra May 10 '20 at 13:04
Let me know if it helps: https://stackoverflow.com/a/52449059/2138752 – Bhojendra Rauniyar May 10 '20 at 14:27
1

Also, I'm not stating about react hooks but just stating that you're already familiar with `componentDidMount` hook. A hook here is to simply state a method. – Bhojendra Rauniyar May 10 '20 at 14:31
Thanks again for the reply, but what does your reply has to do with the problem? – Giulio Serra May 10 '20 at 18:01
You asked how to bind listener in react, that's what I suggested. – Bhojendra Rauniyar May 10 '20 at 18:50
Ok now I got it: basically the library is binded as an event on the window did it?Thanks, now is so much clearer – Giulio Serra May 10 '20 at 19:08
No. The linked post in my comment only shows how to bind the listener in react. And here in the answer provided shows how to use Accelerometer using `reading` listener. And you should follow the docs linked in the answer. Hope, you got it fully now. – Bhojendra Rauniyar May 10 '20 at 19:17
Ok thanks for the reply, but as stated, I'm getting "Accellerometer is not defined", is not releated on how to use listeners at all. – Giulio Serra May 10 '20 at 19:51
That means not supported. – Bhojendra Rauniyar May 10 '20 at 20:31

WC3 Sensors in React Web

1 Answers1