use-bouncy-text

A React hook to make any text node bOuNcY

Installation

npm install use-bouncy-text

Usage

/* Define your bounce styles */
@keyframes bounce {
  60% {
    transform: translate(0px, -2px) scale(1.2);
  }
}

.bouncy-text {
  display: inline-block;
  margin: 0 1px;
  animation: bounce 0.6s infinite ease-in-out;
}

import { useBouncyText } from 'use-bouncy-text';

export function ComponentWithBouncyText() {
  // Define a ref to the text node you want to make bouncy
  const bounceRef = useRef();
  // pass the ref and your CSS class to the hook
  useBouncyText(bounceRef, 'bouncy-text');

  return <div ref={bounceRef}>I'm bouncy teeeeext</div>;
}