react Simple Typewriter 사용하기

https://www.npmjs.com/package/react-simple-typewriter

간단하게 타이핑 효과를 낼 수 있는 라이브러리이다.

npm i react-simple-typewriter
yarn add react-simple-typewriter

import { Typewriter } 부분은 무한 루프가 먹지 않아서
import { useTypewriter }를 사용했다.

import { useTypewriter, Cursor } from "react-simple-typewriter";

const Home = () => {
    const words = ["해적왕이야", "멋진 개발자가 될 거야"];
    const { text } = useTypewriter({
        words,
        loop: 0, 
    });
  return (
    <Contain>
            <Text>
                나는
                <span>
                    {text}
                </span>
                <h5>velog.io</h5>
            </Text>
        </Contain>
  )
}

    const words = ["해적왕이야", "멋진 개발자가 될 거야"];
    const { text } = useTypewriter({
        words,
        loop: 0, 
        cursorStyle: '|',
    });

   <Contain>
            <Text>
                나는
                <span>
                    {text}
                </span>
                <Cursor />
                <h5>velog.io</h5>
            </Text>
        </Contain>

깜빡 거리는 효과도 넣을 수 있다.
{text} 아래에 <Cursor /> 을 꼭 넣어줘야 한다.