2. Methods

Emoji-Fallback.js provides several methods for handling emoji rendering. Below are detailed descriptions of each method available in the library.

emojiSupported()

Checks if the browser supports native emoji rendering.

Returns

• boolean: Returns true if the browser supports emojis natively; otherwise, returns false.

Example

const isSupported = emojiSupported();
console.log(`Native emoji support: ${isSupported}`);

parseEmoji(element, cdn, className)

Replaces Unicode emojis with image emojis using Twemoji if native emoji support is not available.

Parameters

• element: Element | DocumentFragment (optional, default: document.body)
  The DOM element to parse for emojis. This can be a specific element or the entire body.

• cdn: string (optional, default: https://cdn.jsdelivr.net/gh/twitter/[email protected]/assets/)
  The CDN URL for Twemoji assets. This should point to where the Twemoji images are hosted.

• className: string (optional, default: emoji)
  The CSS class name to apply to the replaced emoji images, allowing for custom styling.

Returns

• Promise: Resolves when the parsing and replacement are complete.

Throws

• Error: If the provided element, CDN URL, or class name is invalid.

Example

await parseEmoji(document.getElementById('emoji-container'), 
                  'https://your-cdn-url/', 
                  'emoji-class');

emojiFallback(element, cdn, className)

Checks if emojis are supported and falls back to Twemoji if they are not.

Parameters

• element: Element | DocumentFragment (optional, default: document.body)
  The DOM element to parse for emojis.

• cdn: string (optional, default: https://cdn.jsdelivr.net/gh/twitter/[email protected]/assets/)
  The CDN URL for Twemoji assets.

• className: string (optional, default: emoji)
  The CSS class name to apply to the replaced emoji images.

Returns

• Promise: Resolves when the fallback to Twemoji is complete.

Throws

• Error: If there is an error during the fallback process.

Example

await emojiFallback(document.getElementById('emoji-container'), 
                     'https://your-cdn-url/', 
                     'emoji-class');

parseEmojiString(str, cdn, className)

Parses a string containing Unicode emojis and replaces them with Twemoji image emojis.

Parameters

• str: string
  The string containing the emojis to be parsed.

• cdn: string (optional, default: https://cdn.jsdelivr.net/gh/twitter/[email protected]/assets/)
  The CDN URL for Twemoji assets. This should point to where the Twemoji images are hosted.

• className: string (optional, default: emoji)
  The CSS class name to apply to the replaced emoji images.

Returns

• string: The string with emojis replaced by Twemoji image URLs.

Example

const updatedString = parseEmojiString("Hello 🌍!", 'https://your-cdn-url/', 'emoji-class');
console.log(updatedString);  // Outputs: "Hello <img class="emoji" src="https://your-cdn-url/emoji_url.png" alt="🌍" />!"