Example

├── .gitignore ├── .travis.yml ├── LICENSE ├── README.md ├── example.html ├── example.js ├── index.d.ts ├── index.js ├── index.js.flow ├── package.json ├── test-setup.js ├── test.js └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | *.log 3 | dist 4 | .cache 5 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | git: 2 | depth: 1 3 | sudo: false 4 | language: node_js 5 | node_js: 6 | - '8' 7 | cache: 8 | yarn: true 9 | directories: 10 | - node_modules 11 | script: 12 | - yarn test 13 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2018-present Jake Moxey 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy 4 | of this software and associated documentation files (the "Software"), to deal 5 | in the Software without restriction, including without limitation the rights 6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | copies of the Software, and to permit persons to whom the Software is 8 | furnished to do so, subject to the following conditions: 9 | 10 | The above copyright notice and this permission notice shall be included in all 11 | copies or substantial portions of the Software. 12 | 13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 19 | SOFTWARE. 20 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # `@rehooks/device-orientation` 2 | 3 | > React hook for the Device Orientation API 4 | 5 | > **Note:** This is using the new [React Hooks API Proposal](https://reactjs.org/docs/hooks-intro.html) 6 | > which is subject to change until React 16.7 final. 7 | > 8 | > You'll need to install `react`, `react-dom`, etc at `^16.7.0-alpha.0` 9 | 10 | ## Install 11 | 12 | ```sh 13 | yarn add @rehooks/device-orientation 14 | ``` 15 | 16 | ## Usage 17 | 18 | ```js 19 | import useDeviceOrientation from '@rehooks/device-orientation'; 20 | 21 | function MyComponent() { 22 | let value = useDeviceOrientation(); 23 | return ( 24 |

25 |

Absolute: {value.absolute}

26 |

Alpha: {value.alpha}

27 |

Beta: {value.beta}

28 |

Gamma: {value.gamma}

29 |

30 | ); 31 | } 32 | ``` 33 | -------------------------------------------------------------------------------- /example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Example 8 | 9 | 10 |

11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /example.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render } from 'react-dom'; 3 | import useDeviceOrientation from './'; 4 | 5 | function App() { 6 | let value = useDeviceOrientation(); 7 | return ( 8 |

9 |

Absolute: {value.absolute}

10 |

Alpha: {value.alpha}

11 |

Beta: {value.beta}

12 |

Gamma: {value.gamma}

13 |

14 | ); 15 | } 16 | 17 | render(, window.root); 18 | -------------------------------------------------------------------------------- /index.d.ts: -------------------------------------------------------------------------------- 1 | interface DeviceOrientation { 2 | alpha: number | null; 3 | beta: number | null; 4 | gamma: number | null; 5 | absolute: boolean; 6 | } 7 | 8 | export default function useDeviceOrientation(): DeviceOrientation; 9 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | let { useState, useEffect } = require('react'); 3 | 4 | function useDeviceOrientation() { 5 | const [deviceOrientation, setDeviceOrientation] = useState({ absolute: false, alpha: null, beta: null, gamma: null }); 6 | 7 | function handleDeviceOrientation(event) { 8 | setDeviceOrientation({ 9 | absolute: event.absolute, 10 | alpha: event.alpha, 11 | beta: event.beta, 12 | gamma: event.gamma 13 | }) 14 | } 15 | 16 | useEffect(() => { 17 | window.addEventListener('deviceorientation', handleDeviceOrientation, true); 18 | 19 | return () => { 20 | window.removeEventListener('deviceorientation', handleDeviceOrientation); 21 | }; 22 | }, []) 23 | 24 | return deviceOrientation; 25 | } 26 | 27 | module.exports = useDeviceOrientation; 28 | -------------------------------------------------------------------------------- /index.js.flow: -------------------------------------------------------------------------------- 1 | interface DeviceOrientation { 2 | alpha: number | null; 3 | beta: number | null; 4 | gamma: number | null; 5 | absolute: boolean; 6 | } 7 | 8 | declare export default function useDeviceOrientation(): DeviceOrientation; 9 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@rehooks/device-orientation", 3 | "version": "1.0.0", 4 | "description": "React hook for the Device Orientation API", 5 | "main": "index.js", 6 | "repository": "https://github.com/rehooks/device-orientation", 7 | "author": "Jake Moxey", 8 | "license": "MIT", 9 | "publishConfig": { 10 | "access": "public" 11 | }, 12 | "keywords": [ 13 | "react", 14 | "hooks", 15 | "device", 16 | "orientation" 17 | ], 18 | "files": [ 19 | "index.*" 20 | ], 21 | "scripts": { 22 | "test": "ava test.js", 23 | "example": "parcel example.html" 24 | }, 25 | "peerDependencies": { 26 | "react": "^16.7.0-alpha.0" 27 | }, 28 | "devDependencies": { 29 | "ava": "^0.25.0", 30 | "browser-env": "^3.2.5", 31 | "parcel": "^1.10.3", 32 | "raf": "^3.4.0", 33 | "react": "^16.7.0-alpha.0", 34 | "react-dom": "^16.7.0-alpha.0", 35 | "react-test-renderer": "^16.7.0-alpha.0" 36 | }, 37 | "ava": { 38 | "require": [ 39 | "./test-setup.js" 40 | ] 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /test-setup.js: -------------------------------------------------------------------------------- 1 | require('raf/polyfill'); 2 | require('browser-env')(); 3 | -------------------------------------------------------------------------------- /test.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | let test = require('ava'); 3 | let { createElement: h } = require('react'); 4 | let ReactTestRenderer = require('react-test-renderer'); 5 | let useDeviceOrientation = require('./'); 6 | 7 | function render(val) { 8 | return ReactTestRenderer.create(val); 9 | } 10 | 11 | test(t => { 12 | function Component() { 13 | let value = useDeviceOrientation(); 14 | return h('div', { value }); 15 | } 16 | 17 | let input = render(h(Component)); 18 | 19 | t.deepEqual(input.toJSON().props.value, { 20 | absolute: false, 21 | alpha: null, 22 | beta: null, 23 | gamma: null 24 | }); 25 | }); 26 | --------------------------------------------------------------------------------