Reactのparse系ライブラリ(linkify / emoji / marked)まとめてみた
category
date
Jun 21, 2022
slug
react-parse-libraries
status
Published
summary
Reactのparse系ライブラリ(linkify / emoji / marked)まとめてみた
type
Post
長らく「保存されているplainTextをよしなにリッチにレンダリングする」という要件を仰せつかってきたので、これまでReact上で使ってきたparse系のライブラリをメモとしてまとめてみました。
文字列からリンク検出 - 「react-linkify」
リンクらしきものを検出して<a></a>タグをレンダーしてくれます。
導入はめっちゃ簡単。JSXでラップするだけ。
import Linkify from 'react-linkify';
<Linkify>See examples at tasti.github.io/react-linkify/.</Linkify>
target=blankにしたい場合は、以下のようにプロパティを付与できる
<Linkify
componentDecorator={(decoratedHref, decoratedText, key) => (
<a target="blank" href={decoratedHref} key={key}>
{decoratedText}
</a>
)}
>{message?.text}</Linkify>
emojiの検出 … react-emoji-render
Slackなどで使われる、:bow: :heart: のような絵文字のショートカットを実際の絵文字に変換・レンダーするためのライブラリ。当然ながら、Slackの独自スタンプなどはレンダーできません。
import { toArray } from "react-emoji-render";
...
const parseEmojis = (value: string) => {
const emojisArray = toArray(value);
const newValue = emojisArray.reduce((previous, current) => {
if (typeof current === "string") {
return previous + current;
}
return previous + current.props.children;
}, "");
return newValue;
};
マークダウンのレンダリング … marked
マークダウンのレンダリングならmarked。
marked.parse('# Marked in the browser\n\nRendered by **marked**.');
サニタイジングは別のライブラリを使ってください。とのことです。
DOMPurify.sanitize(marked.parse(`<img src="x" onerror="alert('not happening')">`));
メールテキストのレンダリング … ???
メールを文字タイプなどを上手く判別してレンダー仕分けるようなライブラリが探した中ではなかったので、自前て書きました。辛かったです。誰か教えてください。