TypewriterHero

import React, { useState, useEffect } from 'react';

interface Props {
  phrases: string[];
  speed: number;
}

const TypewriterHero: React.FC<Props> = ({ phrases, speed }) => {
  const [currentPhrase, setCurrentPhrase] = useState(0);
  const [text, setText] = useState('');

  useEffect(() => {
    let i = 0;
    const intervalId = setInterval(() => {
      if (i === phrases[currentPhrase].length) {
        i = 0;
        setCurrentPhrase((prev) => (prev + 1) % phrases.length);
      } else {
        setText(phrases[currentPhrase].slice(0, i + 1));
        i++;
      }
    }, speed);

    return () => clearInterval(intervalId);
  }, [currentPhrase, phrases, speed]);

  return (
    <div style={{ backgroundColor: '#0A0A0A', color: '#C9A84C', padding: '20px', textAlign: 'center' }}>
      <h1>{text}</h1>
    </div>
  );
};

export default TypewriterHero;

Component info

Dependencies

About

A premium React component for creating hero sections with a typewriter text effect. It allows for multiple phrases to cycle through, creating a dynamic and engaging headline. Perfect for landing pages, websites, and applications that require a touch of animation and interactivity. The component is built with TypeScript and has a dark background, making it easy to customize and integrate into existing projects. With its seamless cycling of phrases, the TypewriterHero component is sure to captivate users and leave a lasting impression. It is also highly customizable, allowing developers to tailor the component to their specific needs and requirements. Whether you're building a personal website or a complex web application, the TypewriterHero component is an excellent choice for adding a touch of elegance and sophistication to your hero section.