useParallax

Category

Sensors

Export Size

1.33 kB

Last Changed

5 days ago

Create parallax effect easily. It uses useDeviceOrientation and fallback to useMouse if orientation is not supported.

Demo

Usage

import { useParallax } from '@reause/core'
import { useRef } from 'react'

const container = useRef<HTMLDivElement>(null)
const { tilt, roll, source } = useParallax(container)

<div ref={container} />

Type Declarations

export interface UseParallaxOptions extends ConfigurableWindow {
    deviceOrientationTiltAdjust?: (i: number) => number;
    deviceOrientationRollAdjust?: (i: number) => number;
    mouseTiltAdjust?: (i: number) => number;
    mouseRollAdjust?: (i: number) => number;
}

export interface UseParallaxReturn {
    roll: number;
    tilt: number;
    source: 'deviceOrientation' | 'mouse';
}

export function useParallax(target: RefObject<HTMLElement | null | undefined>, options?: UseParallaxOptions): UseParallaxReturn

Source

Source · Demo · VueUse

Contributors

Changelog

v0.1.0 on

e608a - feat(ci): align CI, packaging and release with VueUse

186bc - fix(core): resolve useParallax audit findings (#614)

8fddc - chore!: remove all Vue-only Maybe* types and getter unions, adopt React Ref (#462)