import { useTypewriter } from 'react-simple-typewriter'

const CustomSimpleTypewriter = () => {
  const text = useTypewriter({
    words: ['i', 'use', 'hooks!'],
    loop: true,
    onLoop: (loopCount) => console.log(`Hook completed loop ${loopCount}`),
    onDone: () => console.log('Done!')
  })

  return <span>{text}</span>
}

import React from 'react'

import Typewriter from 'react-simple-typewriter'
import 'react-simple-typewriter/dist/index.css'

export default function App() {
  return (
    <div className='App'>
      <h1
        style={{ paddingTop: '5rem', margin: 'auto 0', fontWeight: 'normal' }}
      >
        Life is simple{' '}
        <span style={{ color: 'red', fontWeight: 'bold' }}>
          {/* Style will be inherited from the parent element */}
          <Typewriter
            loop
            cursor
            cursorStyle='_'
            typeSpeed={70}
            deleteSpeed={50}
            delaySpeed={1000}
            words={['Eat', 'Sleep', 'Code', 'Repeat!']}
            onLoop={(loopCount) =>
              console.log(`Just completed loop ${loopCount}`)
            }
          />
        </span>
      </h1>
    </div>
  )
}