useParallax

Hook to help create parallax effect

sensors

test coverage

Last changed: 15 days ago

Installation

Library

CLI

Manual

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

Usage

const { value } = useParallax(ref);
// or
const { ref, value } = useParallax();

Demo

source

Api

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
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';

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 interface UseParallaxOptions {
  /** 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 {
  value: UseParallaxValue;
}

export interface UseParallax {
  (target: HookTarget, options?: UseParallaxOptions): UseParallaxReturn;

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

Source

Source • Demo

Contributors

D

debabin