react-device-orientation-hook

Use React to provide a custom hook using a device orientation event.

Usage no npm install needed!

<script type="module">
  import reactDeviceOrientationHook from 'https://cdn.skypack.dev/react-device-orientation-hook';
</script>

README

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