Last active
March 21, 2022 15:38
-
-
Save nolanlawson/fead700a0325aabd92670d56d6d422d8 to your computer and use it in GitHub Desktop.
emoji-picker-element with Twemoji
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html lang=en> | |
| <head> | |
| <title>emoji-picker-element: using Twemoji</title> | |
| </head> | |
| <body> | |
| <h1>emoji-picker-element: using Twemoji</h1> | |
| <p> | |
| This demo shows how to use emoji-picker-element with Twemoji. | |
| Note that this carries a performance cost because of 1) using MutationObserver to monitor for DOM changes, and 2) downloading Twemoji images. | |
| Use this approach with care. | |
| </p> | |
| <emoji-picker></emoji-picker> | |
| <script src="https://twemoji.maxcdn.com/v/14.0.0/twemoji.min.js" integrity="sha384-L1ViA0v9uyiBlZsOGT/z9RVgs+Gku2SDCuzaAoLco0hEgfYZYiztb+pRgWYHkDwb" crossorigin="anonymous"></script> | |
| <script type="module" src="https://cdn.jsdelivr.net/npm/emoji-picker-element@^1/index.js"></script> | |
| <script type="module"> | |
| const picker = document.querySelector('emoji-picker') | |
| // Adjust twemoji styles | |
| const style = document.createElement('style') | |
| style.textContent = `.twemoji { | |
| width: var(--emoji-size); | |
| height: var(--emoji-size); | |
| pointer-events: none; | |
| }` | |
| picker.shadowRoot.appendChild(style) | |
| const observer = new MutationObserver(() => { | |
| for (const emoji of picker.shadowRoot.querySelectorAll('.emoji')) { | |
| // Avoid infinite loops of MutationObserver | |
| if (!emoji.querySelector('.twemoji')) { | |
| // Do not use default 'emoji' class name because it conflicts with emoji-picker-element's | |
| twemoji.parse(emoji, { className: 'twemoji' }) | |
| } | |
| } | |
| }) | |
| observer.observe(picker.shadowRoot, { | |
| subtree: true, | |
| childList: true | |
| }) | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment