Textbox-with-emoji-picker

index.html

<!--Emojis are unicodes, so it wont have much problem showing in the mobile or mails-->

<div class="container full-width">
      <div class="row justify-content-center">
            <p class="lead emoji-picker-container">
              <textarea type="textbox" data-emoji-input="unicode" class="form-control" placeholder="Input field" data-emojiable="true"></textarea>
            </p>            
      </div>
</div>

script.js

      $(function() {
        // Initializes and creates emoji set from sprite sheet
        window.emojiPicker = new EmojiPicker({
          emojiable_selector: '[data-emojiable=true]',
          assetsPath: 'http://onesignal.github.io/emoji-picker/lib/img/',
          popupButtonClasses: 'fa fa-smile-o'
        });
        // Finds all elements with `emojiable_selector` and converts them to rich emoji input fields
        // You may want to delay this step if you have dynamically created input fields that appear later in the loading process
        // It can be called as many times as necessary; previously converted input fields will not be converted again
        window.emojiPicker.discover();
      });

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://onesignal.github.io/emoji-picker/lib/js/config.js"></script>
<script src="https://onesignal.github.io/emoji-picker/lib/js/util.js"></script>
<script src="https://onesignal.github.io/emoji-picker/lib/js/jquery.emojiarea.js"></script>
<script src="https://onesignal.github.io/emoji-picker/lib/js/emoji-picker.js"></script>

style.scss

.full-width {
  width: 100%;
  height: 100vh;
  display: flex;
  
  .justify-content-center {
    display: flex;
    align-self: center;
    width: 100%;
  }
  .lead.emoji-picker-container {
    width: 300px;
    display: block;
    input {
      width: 100%;
      height: 50px;
    }
  }
}

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://onesignal.github.io/emoji-picker/lib/css/emoji.css" rel="stylesheet" />

textbox-with-emoji-picker.markdown

Textbox-with-emoji-picker

A Pen by Strange on CodePen.

License.

litte emoji picker