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')">`));
 

メールテキストのレンダリング … ???

メールを文字タイプなどを上手く判別してレンダー仕分けるようなライブラリが探した中ではなかったので、自前て書きました。辛かったです。誰か教えてください。

© Titch 2022 - 2024