React: useWiggle - Wiggle relevant elements when the user does the wrong thing twice

readme.md

what

Wiggle relevant elements when the user does the wrong thing twice (e.g. submitting a form with validation errors twice)

usage

const { scope: wiggleRef, wiggle } = useWiggle();

const handleSubmit = () => {
  if (errors) {
    wiggle();
    return;
  }
}

<span ref={wiggleRef} className="inline-flex">
  <Button type="submit" variant="primary" disabled={pending}>
    Save address
  </Button>
</span>

use-wiggle.ts

import { useAnimate } from "motion/react";

const WIGGLE_X = [0, -8, 8, -6, 6, -3, 3, 0];

export function useWiggle() {
  const [scope, animate] = useAnimate<HTMLElement>();

  async function wiggle() {
    if (!scope.current) return;

    await animate(scope.current, { x: WIGGLE_X }, { duration: 0.35, ease: "easeInOut" });
  }

  return { scope, wiggle };
}