useParallax

Hook to help create parallax effect

sensors

low

test coverage

Last changed: 2 days ago

Installation

Library

CLI

Manual

import { useParallax } from '@siberiacancode/reactuse';

Usage

const { snapshot, watch } = useParallax(ref, (value) => console.log(value));
// or
const { snapshot, watch } = useParallax(ref, options);
// or
const { ref, snapshot, watch } = useParallax<HTMLDivElement>((value) => console.log(value));
// or
const { ref, snapshot, watch } = useParallax<HTMLDivElement>(options);

Demo

source

Api

Parameters

Name	Type	Default	Note
target	HookTarget	-	The target element for the parallax effect
callback?	(value: UseParallaxValue, event: Event) => void	-	The callback invoked on parallax updates

Returns

UseParallaxReturn

Parameters

Name	Type	Default	Note
target	HookTarget	-	The target element for the parallax effect
options	UseParallaxOptions	-	The options for the parallax effect

Returns

UseParallaxReturn

Parameters

Name	Type	Default	Note
callback?	(value: UseParallaxValue, event: Event) => void	-	The callback invoked on parallax updates

Returns

UseParallaxReturn & { ref: StateRef<Target> }

Parameters

Name	Type	Default	Note
options	UseParallaxOptions	-	The options for the parallax effect

Returns

UseParallaxReturn & { ref: StateRef<Target> }

Type declaration

import type { HookTarget } from '@/utils/helpers';

import type { StateRef } from '../useRefState/useRefState';

interface InternalDeviceOrientationValue {
  absolute: boolean;
  alpha: number | null;
  beta: number | null;
  gamma: number | null;
}

interface InternalScreenOrientationValue {
  angle: number;
  orientationType?: OrientationType;
}

export interface UseParallaxValue {
  /** Roll value. Scaled to `-0.5 ~ 0.5` */
  roll: number;
  /** Sensor source, can be `mouse` or `deviceOrientation` */
  source: 'deviceOrientation' | 'mouse';
  /** Tilt value. Scaled to `-0.5 ~ 0.5` */
  tilt: number;
}

export type UseParallaxCallback = (value: UseParallaxValue, event: Event) => void;

export interface UseParallaxOptions {
  /** Callback invoked on parallax updates */
  onChange?: UseParallaxCallback;
  /** Device orientation roll adjust function */
  deviceOrientationRollAdjust?: (value: number) => number;
  /** Device orientation tilt adjust function */
  deviceOrientationTiltAdjust?: (value: number) => number;
  /** Mouse roll adjust function */
  mouseRollAdjust?: (value: number) => number;
  /** Mouse tilt adjust function */
  mouseTiltAdjust?: (value: number) => number;
}

interface UseParallaxReturn {
  snapshot: UseParallaxValue;
  supported: boolean;
  watch: () => UseParallaxValue;
}

export interface UseParallax {
  (target: HookTarget, callback?: UseParallaxCallback): UseParallaxReturn;

  (target: HookTarget, options?: UseParallaxOptions): UseParallaxReturn;

  <Target extends Element>(
    callback?: UseParallaxCallback,
    target?: never
  ): UseParallaxReturn & {
    ref: StateRef<Target>;
  };

  <Target extends Element>(
    options?: UseParallaxOptions,
    target?: never
  ): UseParallaxReturn & {
    ref: StateRef<Target>;
  };
}

Source

Source • Demo

Contributors

D

debabin