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 1 year 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 (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2024-09-27T06:22:35.000Z (over 1 year ago)
- Last Synced: 2024-10-12T02:49:47.099Z (over 1 year 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
[](https://opensource.org/licenses/MIT)
[](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
```