【React】Twitter絵文字ライブラリTwemoji解説!

  • このエントリーをはてなブックマークに追加
  • Pocket

こんにちは。タクマ™ [@suwaru_blog] です。

HTML で Twitter の絵文字を使えるようにする Twemoji という JavaScript ライブラリがあります。
これは素の JavaScript で書かれているので、使うときはレガシーな記述をしないといけません。

今回は React でもっとシンプルに使える react-twemoji について解説します!

react-twemoji

インストール

yarn を使ってインストールします。

yarn add react-twemoji

使い方

react-tewmoji は以下のように使えます。

import Twemoji from 'react-twemoji';

// 省略

    render() {
        return (
            <Twemoji tag="span" options={{ className: 'test-twemoji' }}>😀</Twemoji>
        );
    }
}

上記 JavaScript は HTML として以下のように変換されます。

<span><img draggable="false" class="test-twemoji" alt="😀" src="https://twemoji.maxcdn.com/v/12.1.5/72x72/1f600.png"></span>

Twemoji コンポネントの tag 属性 options 属性は省略可能です。
tag 属性を指定しなかった場合、デフォルトは <div> で囲まれます。

これを実際にブラウザで表示すると、ちゃんと Twitter 絵文字 (画像) になっています。
サンプルページを用意したので確認してみてください。

vue-twemoji

Vue.js のラッパーライブラリもあるので、興味がある方はリンク先を確認してみてください。

コメントを残す

*