import React from 'react';
import TypingEffect from 'react-typed.ts';

const App: React.FC = () => {
  return (
    <div>
      <h1>Welcome to My Website</h1>
      <TypingEffect
        strings={[
          'Hello, World!',
          'This is a typing effect.',
          'React is awesome!',
          'Enjoy coding!',
        ]}
        typeSpeed={70}
        backSpeed={50}
        loop={true}
      />
    </div>
  );
};

export default App;

<TypingEffect
  strings={['Typing effect example 1', 'React components are great!']}
  typeSpeed={60}
  backSpeed={40}
  loop={true}
/>

<TypingEffect
  strings={['Another example', 'With a different cursor']}
  typeSpeed={80}
  backSpeed={60}
  cursorChar="_"
/>

<TypingEffect
  strings={["Fast typing", "Slow typing"]}
  typeSpeed={100}   // Typing speed
  backSpeed={50}    // Backspacing speed
  loop={true}
/>

<TypingEffect
  strings={["This will fade out", "And then this text will appear"]}
  typeSpeed={50}
  backSpeed={25}
  fadeOut={true}
  loop={true}
/>

<TypingEffect
  strings={["No cursor", "Cursor visible"]}
  typeSpeed={50}
  showCursor={false}   // Hides the cursor
  loop={true}
/>

<TypingEffect
  strings={["Backspacing only mismatched text", "Smart backspacing at work"]}
  typeSpeed={50}
  backSpeed={50}
  smartBackspace={true}  // Only backspace the part of the string that doesn't match
  loop={true}
/>

<TypingEffect
  strings={["Shuffled string 1", "Shuffled string 2", "Shuffled string 3"]}
  typeSpeed={50}
  shuffle={true}  // Randomize the order of strings
  loop={true}
/>

<TypingEffect
  strings={["Custom cursor character"]}
  typeSpeed={50}
  cursorChar={'_'}  // Change the cursor character
  loop={true}
/>

<TypingEffect
  strings={["Delayed start typing"]}
  typeSpeed={50}
  startDelay={1000}   // Delay before typing starts
  backDelay={1000}    // Delay before backspacing starts
  loop={true}
/>

<TypingEffect
  strings={["Typing fast!", "Then typing slow...", "And finally fading out!"]}
  typeSpeed={100}
  backSpeed={50}
  startDelay={500}
  backDelay={700}
  fadeOut={true}
  smartBackspace={true}
  shuffle={true}
  cursorChar={'|'}
  loop={true}
/>