useDeviceMotion
| Category | Sensors |
|---|---|
| Export Size | 703 B |
| Last Changed | last year |
Reactive DeviceMotionEvent. Provide web developers with information about the speed of changes for the device's position and orientation.
Usage
import { useDeviceMotion } from '@vueuse/core'
const {
acceleration,
accelerationIncludingGravity,
rotationRate,
interval,
} = useDeviceMotion()| State | Type | Description |
|---|---|---|
| acceleration | object |
An object giving the acceleration of the device on the three axis X, Y and Z. |
| accelerationIncludingGravity | object |
An object giving the acceleration of the device on the three axis X, Y and Z with the effect of gravity. |
| rotationRate | object |
An object giving the rate of change of the device's orientation on the three orientation axis alpha, beta and gamma. |
| interval | Number |
A number representing the interval of time, in milliseconds, at which data is obtained from the device.. |
You can find more information about the state on the MDN.
Component Usage
This function also provides a renderless component version via the
@vueuse/componentspackage. Learn more about the usage.
<UseDeviceMotion v-slot="{ acceleration }">
Acceleration: {{ acceleration }}
</UseDeviceMotion>Type Declarations
export interface DeviceMotionOptions
extends ConfigurableWindow,
ConfigurableEventFilter {}
/**
* Reactive DeviceMotionEvent.
*
* @see https://vueuse.org/useDeviceMotion
* @param options
*/
export declare function useDeviceMotion(options?: DeviceMotionOptions): {
acceleration: Ref<DeviceMotionEventAcceleration | null>
accelerationIncludingGravity: Ref<DeviceMotionEventAcceleration | null>
rotationRate: Ref<DeviceMotionEventRotationRate | null>
interval: Ref<number>
}
export type UseDeviceMotionReturn = ReturnType<typeof useDeviceMotion>Source
© 2019-present Anthony Fu
Licensed under the MIT License.
https://vueuse.org/core/useDeviceMotion/