react で絵文字を入力できる様にする

react で絵文字を入力できる様にする

emoji-martで簡単に実装できた。

実装イメージ

インストール

yarn i emoji-mart

絵文字ってどんなデータなんだ？

投げキッスをした絵文字のオブジェクトを見て見る

nativeのkeyを見るとそのままやんけ！！

想定していたのは、emoticons: (2) [":*", ":-*"] emotionsなどに対して

パッケージが提供している、クラスで表示すると思っていたらそのままいける見たい

こんな感じを想定してた。

<EmoJi value={this.state.emojicons[0]}>

でも、nativeのバリューを表示すれば良い。

dbにはどうやって保存されているのか？

rails のコンソールで確認して見たら。。。そのままやんけ！！！

実装

要点しか書いていないですが、こんな感じで実装できます。

• パッケージインポート
• コンポーネントを使う
• addEmoji関数で絵文字を追加する

import { Picker } from 'emoji-mart';
import 'emoji-mart/css/emoji-mart.css'; # パッケージをここでインポート


class Tweets extends React.Component {
  constructor(props){
    super(props)
    this.state ={
      value: '',
      showEmoji: false # 絵文字の入力画面を最初は非表示にする
    } 
  }
  
   handleChange(e){
     this.setState({value: e.target.value}) ## ここでテキストを更新
   }

   addEmoji(e){
      let emoji = e.native
      this.setState({
        value: this.state.value + emoji  ## ここで絵文字を追加する
      })
   }

  render(){

   return(
    <span>{this.state.value}</span>  ## ここに絵文字が表示される想定
    <input  type="text"  onChange={(e) => this.handleChange(e) }/>
    <div className={this.state.showEmoji ? '' : 'disabled'}> ## ここでアイコンの入力画面を表示非表示をコントロール
　　<i className="fa  fa-man" onClick={(emoji) => this.addEmoji(emoji)}><i/>
    </div> 
   )
  }
}

参考にした記事

• ドキュメント

github.com

• Medium

medium.com

• サンプル実装

github.com