새싹 해커톤 : 생성 AI 활용

아이디어 | 생성형 AI | 생성 | 정성평가

상금 : 1,500만원
2024.06.07 ~ 2024.07.22 10:00 + Google Calendar
619명 마감

마감

대회안내 데이터 코드 공유 토크 리더보드

제출

서버쪽 데이터를 받아와서 Type Animation을 적용하려 하는데 개행이 안됩니다.

박민준

2024.08.01 19:33 945 조회

React TypeAnimation 라이브러리를 사용하여 타이핑 애니메이션을 구현했는데

 <TypeAnimation
                    sequence={[`${chat.text.replace(/\n/g, "<br>")}`]}
                    speed={50}
                    cursor={false}
                    style={{ whiteSpace: "pre-wrap" }}
                  /> 
이 코드에서 개행문자를 어떻게 구현해야 할지 모르겠습니다

댓글 5개

로그인이 필요합니다

comment

0 / 1000

새싹해커톤_멘토_유병욱

2024.08.01 19:36

해당 라이브러리는 <br> 태그로 개행 되는 것이 아닌 \n 문자로 감지 하고 개행 하는 걸로 알고 있습니다.
문자를 치환하지 않고 시도 해보시겠어요?

예시코드는 아래와 같습니다.

<TypeAnimation
  style={{ whiteSpace: 'pre-line', height: '195px', display: 'block' }}
  sequence={[
    `Line one\nLine Two\nLine Three\nLine Four\nLine Five Line Seven`,
    1000,
    '',
  ]}
/>

새싹해커톤_멘토_유병욱

2024.08.01 19:38

참조 링크입니다.
https://react-type-animation.netlify.app/examples#multiple-lines

새싹해커톤_멘토_김동영

2024.08.01 19:38

https://react-type-animation.netlify.app/examples#multiple-lines
Multiple Lines쪽 예제를 확인해보시면, 개행 문자(\n)를 줄바꿈 용도로 사용하고 있는 걸로 보이네요.
개행 문자는 그대로 두고 다른 액션을 취해보시면 좋을 것 같습니다.

박민준

2024.08.01 19:45

감사합니다 멘토님 해결했습니다

새싹해커톤_멘토_유병욱

2024.08.01 19:46

마지막까지 화이팅입니닷!

📣 댓글 작성 창의 위치가 댓글 리스트 상단으로 이동했습니다!