Use Bounce

PreviousNext

The use-bounce hook.

Docs
animbitslib

Preview

Loading preview…
lib/use-bounce.ts
import { type MotionProps, type Easing } from "motion/react";

export interface UseBounceOptions {
  bounceHeight?: number;

  duration?: number;

  ease?: Easing | Easing[];

  repeat?: number;

  delay?: number;

  onHover?: boolean;
}

export function useBounce(options: UseBounceOptions = {}): MotionProps {
  const {
    bounceHeight = -20,
    duration = 0.6,
    ease = [0.68, -0.55, 0.265, 1.55],
    repeat = Infinity,
    delay = 0,
    onHover = false,
  } = options;

  if (onHover) {
    return {
      whileHover: {
        y: [0, bounceHeight, 0],
      },
      transition: {
        duration,
        ease,
      },
    };
  }

  return {
    animate: {
      y: [0, bounceHeight, 0],
    },
    transition: {
      duration,
      ease,
      repeat,
      delay,
    },
  };
}

Installation

npx shadcn@latest add @animbits/hooks-use-bounce

Usage

import { HooksUseBounce } from "@/lib/hooks-use-bounce"
HooksUseBounce()