1. /
  2. /
  3. 【React】Twitter絵文字ライブラリTwemoji解説！

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

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

こんにちは。iQeda [@iQeeeda] です。

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

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

目次

  1. react-twemoji
  2. vue-twemoji

react-twemoji

公式) react-twemoji – npm

インストール

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 のラッパーライブラリもあるので、興味がある方はリンク先を確認してみてください。

公式) vue-twemoji – npm

お仕事ください！

僕が代表を務める 株式会社 EeeeG では Web 制作・システム開発・マーケティング相談を行っています。
なにかお困りごとがあれば、Twitter DM や Web サイトからお気軽にご相談ください。

カテゴリ「Develop」の最新記事

最新記事

コメントを残す

*