SeSAC Hackathon: Generative AI conjugation

Idea | Generate AI | Generative | Qualitative evaluation

Prize : 1,500만원
619 Users Completed

Closed

Overview Data Code (share) Talk Leaderboard

Submission

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

박민준

2024.08.01 19:33 986 Views

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

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

5 Comments

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

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

📣 The comment input field has been moved to the top of the comment list!

List

파이썬 서버(fastapi) 폴더 구조 질문

Competition - 새싹 해커톤 : 생성 AI 활용

Likes 4