[React] 'react-typed'로 타이핑 효과 구현하기

간단하게 화면에서 텍스트 타이핑 효과를 구현할 수 있는 라이브러리

웹이나 앱에 텍스트의 동적인 애니메이션 효과를 낼 수 있음

react-typed 설치

npm i react-typed

또는

yarn add react-typed

react-typed 적용예시

import React from "react";
import Typed from "react-typed";

function App() {
  return (
    <div>
      <Typed
        strings={["안녕하세요", "react-typed 패키지 적용 중입니다."]}
        typeSpeed={50} //타이핑 속도
        backSpeed={25} //타이핑 지우는 속도
        loop={true} //반복할건지
        style={{
          color: "green",
          fontSize: "80px",
          display: "flex",
          justifyContent: "center",
          marginTop: "30%",
          alignItems: "center",
        }}
      />
    </div>
  );
}

export default App;

react-typed 적용화면

react-typed 속성

필수 속성

strings: 타이핑 효과로 표시할 문자열의 배열을 정의

optional 속성

typeSpeed: 타이핑 속도
backSpeed: 백스페이스 효과의 속도
startDelay: 타이핑 시작하기 전의 대기 시간
backDelay: 백스페이스 시작하기 전의 대기 시간
shuffle(boolean): 문자열 배열의 순서를 무작위로 섞어서 나타냄
loop(boolean or Num): 문자열 배열을 끝까지 타이핑한 후 다시 처음부터 반복됩니다. 숫자를 지정하면 반복 횟수를 제한할 수 있습니다.
cursorChar(String): 커서로 표시되는 문자를 지정합니다. 기본값은 "|"입니다.

공식문서: https://www.npmjs.com/package/react-typed