こんにちは。iQeda [@iQeeeda] です。
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 のラッパーライブラリもあるので、興味がある方はリンク先を確認してみてください。
No comments yet