Intro
- 개인 포트폴리오 사이트를 만들면서 글자에 타자기 효과를 주고 싶은 경우가 종종 있습니다.
- 이때 이번에 소개할 라이브러리를 사용하면 쉽게 타자기 효과를 낼 수 있습니다.
- 현재 리액트 최신 버전인 18버전에서도 잘 동작하는 것을 확인했습니다. 그러므로 손쉽게 타자기 효과를 사용해 봅시다😀
npm typewriter-effect
설치 방법
# with npm
npm i typewriter-effect
# with yarn
yarn add typewriter-effect초간단 예시
- 우선 Typewriter 컴포넌트를 가져옵니다.
- options에 값을 넣어줍니다.
import Typewriter from 'typewriter-effect';
<Typewriter
options={{
strings: ['Hello', 'World'],
autoStart: true,
loop: true,
}}
/>- 우선 여기까지만 하더라도 원하는 타자기 효과를 내는 데 성공했습니다.
- 여기에 추가적인 옵션을 넣어서 디테일한 효과를 줄 수 있습니다.
- 그렇다면 아래 "옵션 사항"을 참고하시면 됩니다.
옵션 사항
- 여기의 옵션은 Typewriter 컴포넌트에서 options props의 값으로 들어가는 객체의 key와 value값으로 넣어주면 됩니다.
| Name | Type | Default value | Description |
|---|---|---|---|
| strings | String or Array | null | autoStart 옵션을 사용할 때 입력할 문자열 |
| cursor | String | 파이프 문자 | 커서로 사용할 문자열 값 |
| delay | 'natural' or Number | 'natural' | 입력할 때 각 문자 사이의 지연시간 추가하기 |
| deleteSpeed | 'natural' or Number | 'natural' | 각 문자를 삭제하는 사이의 지연시간 |
| loop | Boolean | false | 루프를 계속 할지 여부 |
| autoStart | Boolean | false | 입력 문자열을 자동으로 시작할지 여부. strings 옵션을 제공해야 합니다. |
| pauseFor | Number | 1500 | 자동 시작 모드를 사용할 때 문자열을 입력한 후 일시 중지 시간 |
| devMode | Boolean | false | console logs 표시 여부 |
| skipAddStyles | Boolean | 기본 타자기 CSS 스타일 추가를 스킵합니다. | |
| wrapperClassName | String | 'Typewriter__wrapper' | 래퍼 요소의 클래스 이름입니다. |
| cursorClassName | String | 'Typewriter__cursor' | 커서 요소의 클래스 이름입니다. |
| stringSplitter | Function | 문자열 분할 기능, 이모티콘을 분할하는 데 사용할 수 있습니다. | |
| onCreateTextNode | Function | null | 문자를 DOM에 추가하기 전에 문자에 대한 텍스트 노드를 생성하는 내부 메서드를 대체하는 콜백 함수입니다. 만약에 null을 반환하면, DOM에 아무것도 추가하지 않으므로 이를 처리하는 것은 사용자의 몫입니다. |
| onRemoveNode | Function | null | 노드를 제거하려고 할 때 콜백 함수. 첫 번째 매개변수는 객체 { node: HTMLNode, charater: string }입니다. |
나가면서
- 지금 까지 타자기 효과를 내는 모듈을 사용해 보았습니다.
- npm 에서 이것 저것 검색해 보다가 찾은 라이브러리입니다.
- 재미있는 효과를 가지고 있기도 하고, 자주 사용할 것같아서 문서로 정리해 보았습니다.
- 옵션을 넣으면 조금더 디테일한 효과를 줄 수있으니 한번 적용해 보시길 바랍니다.
참고
Here and Now. 🧗♂️