doong-jo / react-device-orientation-hook

React Custom Hook using Device Orientation Web API

react-device-orientation-hook

Demo

Usage

📌 Device Orientation Event works only in HTTPS for security reasons.

npm i react-device-orientation-hook

import useDeviceOrientation from 'react-device-orientation-hook;

function Component() {
  const { transformStyle, resetPivotOrientation } = useDeviceOrientation();

  return (
    <>
      <div style={transformStyle} onClick={resetPivotOrientation} >
        Hello World!
      </div>
      <p>Touch text and Revise orientation</p>
    </>
  );
}

Device Orientation Web API Spec

• W3C
• Google Developers
• MDN

Development

Testing

npm run test

Building

npm run build

Storybook

To run a live-reload Storybook server on your local machine:

npm run storybook