Emoji (PicMo)

Plain JavaScript emoji picker.

Basic usage

A picker rendered directly on the page and always visible. Create an element with the data-emoji-picker attribute and automatically generate an emoji box with search function and various categories for your emojis.

<div data-emoji-picker></div>

Emoji width input field.

Add a data-emoji-target attribute with a matching input tag, for example data-emoji-target="#message-01", where the input id is message-01.

<div data-emoji-picker data-emoji-target="#message-01"></div>
<input type="text" class="form-control" id="message-01">

Popup

Instead of data-emoji-picker use the data-emoji-popup attribute. By clicking on the element a popup will appear with the emoji box.

You can, of course, interact with an input element here too.

<div class="input-group input-group-merge w-md-50">
    <a href="javascript: void(0);" class="input-group-text link-secondary" data-emoji-popup data-emoji-target="#message-02">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="18" width="18"><g><path d="M12,0A12,12,0,1,0,24,12,12,12,0,0,0,12,0Zm0,22A10,10,0,1,1,22,12,10,10,0,0,1,12,22Z" style="fill: currentColor"/><path d="M16.49,14.13a1,1,0,0,0-1.36.38,3.68,3.68,0,0,1-3.13,2,3.68,3.68,0,0,1-3.13-2,1,1,0,1,0-1.74,1,5.62,5.62,0,0,0,4.87,3,5.62,5.62,0,0,0,4.87-3A1,1,0,0,0,16.49,14.13Z" style="fill: currentColor"/><circle cx="8" cy="9" r="2" style="fill: currentColor"/><circle cx="16" cy="9" r="2" style="fill: currentColor"/></g></svg>                                                  
    </a>

    <input type="text" class="form-control" id="message-02" placeholder="Type a message">
</div>

By using code splitting and dynamic import techniques you don't need to worry about the size of the JavaScript file. Dashly will only import the necessary files when they are needed.