@erosnicolau/animated-text/dist/components/AnimatedPhrase.js

Advanced React animated text component with comprehensive animation effects

import { jsx as _jsx } from "react/jsx-runtime";
import { memo } from 'react';
import { getPhraseWithAnimationStyles } from '../utils/stylingUtils';
const AnimatedPhrase = memo(({ phraseIndex, content, phraseStyles, animatedItems, timingDefaults, globalVerticalAlign }) => {
    const { className, style } = getPhraseWithAnimationStyles(phraseIndex, phraseStyles, animatedItems, timingDefaults, globalVerticalAlign);
    return (_jsx("span", { className: className, style: style, children: content }));
}, (prevProps, nextProps) => {
    // Only re-render if this specific phrase's animation state changes
    const prevAnimated = prevProps.animatedItems.has(prevProps.phraseIndex);
    const nextAnimated = nextProps.animatedItems.has(nextProps.phraseIndex);
    return (prevAnimated === nextAnimated &&
        prevProps.content === nextProps.content &&
        prevProps.phraseIndex === nextProps.phraseIndex);
});
AnimatedPhrase.displayName = 'AnimatedPhrase';
export default AnimatedPhrase;