is-emoji-supported

    0.0.5 • Public • Published

    🦄 is-emoji-supported

    is-emoji-supported is a library allowing you to detect if the running device supports the specified emoji.

    No dependency license: MIT lint e2e

    As of March 2020, the Unicode Standard includes a total of 3 304 emojis. The latest version introduced 117 new ones and vendors have troubles implementing them. In fact there are no operating system supporting all of them. Therefore there is a need to know if a specified emoji isn't supported by the browser to fallback to an image.


    🚀 Installation

    Install with yarn:

    $ yarn add is-emoji-supported
    

    Or install using npm:

    $ npm i is-emoji-supported
    

    ⏳ Running the tests

    $ npm test
    

    📖 Examples

    Basic usage

    The most basic usage is to use the function directly to detect is the current device support the emoji.

    import {isEmojiSupported} from 'is-emoji-supported';
     
    if (isEmojiSupported('🦄')) {
      alert('Houra 🦄 is supported');
    } else {
      alert('No support for unicorn emoji yet');
    }

    Usage with your own cache handler

    This library is doing pixel comparison to determine if an emoji is supported. This check can be slow so there is a memory cache implemented. For some reasons you may want to use your own cache implementation to store the result in either localStorage, IndexedDB or anything else for persistent cache. You only need to match the Map interface.

    import {setCacheHandler} from 'is-emoji-supported';
     
    const key = 'emoji-cache';
    const cache = JSON.parse(localStorage.getItem(key) || {});
     
    setCacheHandler({
      has: (unicode: string) => unicode in cache,
      get: (unicode: string) => cache[unicode],
      set: (unicode: string, supported: boolean) => {
        cache[unicode] = supported;
        localStorage.setItem(key, JSON.stringify(cache));
      }
    });

    Fallback to images

    In most of the cases, you will want to fallback to images to handle unsupported emojis. The best way for this is to build an object with a fallback to all supported images. You can build your own or use the one given by JoyPixel, Twemoji or others services.

    import React from 'react';
    import {isEmojiSupported} from 'is-emoji-supported';
     
    const emojiMap = {
      '🦄': {
        alt: 'unicorn',
        src: '/images/unicorn.png'
      },
      ...
    };
     
    export const Emoji = ({ unicode }) => {
      const attrs = emojiMap[unicode];
     
      return !attrs ? null : isEmojiSupported(unicode) ? (
        <span role="img" aria-label={attrs.alt}>
          {unicode}
        </span>
      ) : (
        <img {...attrs} />
      );
    };

    Install

    npm i is-emoji-supported

    DownloadsWeekly Downloads

    2,260

    Version

    0.0.5

    License

    MIT

    Unpacked Size

    24.5 kB

    Total Files

    13

    Last publish

    Collaborators

    • dokoliday
    • guillaumepn
    • muzishell
    • vthibault
    • cyrilh