Web Dev/react.js
블로그 맞춤 html-react-parser 라이브러리 사용법 ! 예시 포함
이준호
2023. 8. 17. 13:11
반응형
Quill Editor를 사용했는데
입력한 내용을 출력하면 이와 같이 HTML 형식 그대로 나온다.
이를 해결하는 아주 좋은 라이브러리가 있다
https://www.npmjs.com/package/html-react-parser
html-react-parser
HTML to React parser.. Latest version: 4.2.1, last published: 7 days ago. Start using html-react-parser in your project by running `npm i html-react-parser`. There are 989 other projects in the npm registry using html-react-parser.
www.npmjs.com
react 최신 버전 또는 다른 라이브러리와의 충돌이 있을 수 있으니
꼭 해당 명령어로 진행 해주길 바란다.
npm install html-react-parser --save
Usage
Import ES module:
import parse from 'html-react-parser';
그리고 나서는 해당 HTML 데이터 값을
parse 함수에 넣어 주면
editor 에 맞는 뷰를 제공한다.
<ul>
{parse(`
<li>Item 1</li>
<li>Item 2</li>
`)}
</ul>
반응형