https://github.com/doong-jo/react-device-orientation-hook

React Custom Hook using Device Orientation Web API
https://github.com/doong-jo/react-device-orientation-hook

accelorometer device-orientation gyroscope hook react

Last synced: about 2 months ago
JSON representation

React Custom Hook using Device Orientation Web API

• Host: GitHub
• URL: https://github.com/doong-jo/react-device-orientation-hook
• Owner: doong-jo
• License: mit
• Created: 2021-06-25T06:36:12.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2024-09-27T06:22:35.000Z (3 months ago)
• Last Synced: 2024-10-12T02:49:47.099Z (2 months ago)
• Topics: accelorometer, device-orientation, gyroscope, hook, react
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/react-device-orientation-hook
• Size: 3 MB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-device-orientation-hook

[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](https://opensource.org/licenses/MIT)

[![CodeQL](https://github.com/doong-jo/react-device-orientation-hook/actions/workflows/codeql-analysis.yml/badge.svg)](https://github.com/doong-jo/react-device-orientation-hook/actions/workflows/codeql-analysis.yml)

## Demo



## Usage

📌  [Device Orientation Event works only in HTTPS for security reasons.](https://w3c.github.io/deviceorientation/#security-and-privacy)

```

npm i react-device-orientation-hook

```

```typescript

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

function Component() {

  const { transformStyle, resetPivotOrientation } = useDeviceOrientation();

  return (

    <>

      


        Hello World!

      

      
Touch text and Revise orientation

    >

  );

}

```


## Device Orientation Web API Spec

- [W3C](https://www.w3.org/TR/orientation-event/)

- [Google Developers](https://developers.google.com/web/fundamentals/native-hardware/device-orientation)

- [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Window/deviceorientation_event)

## Development

### Testing

```

npm run test

```

### Building

```

npm run build

```

### Storybook

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

```

npm run storybook

```