Awesome

🦄 is-emoji-supported

Description

is-emoji-supported is a library allowing you to detect if the running device supports the specified emoji and helps you providing a solution if it does not support it.

📖 Table of content

Installation
How to use
How to test
How to contribute
List of our other package
Join us
License

🚀 Installation

Install with yarn:

$ yarn add is-emoji-supported

Or install using npm:

$ npm i is-emoji-supported

🖥️ How to use

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} />
  );
};

⏳ How to test

$ npm test

🤝 How to contribute

fork the project
(write how to to launch it)

create a branch from main/master like that

$ contribution/fix/your-github-identity

$ contribution/improvment/your-github-identity

push several (if needed) clear commits
add tests following the way of the other ones have been wrote
make sure that all test runs
push your code

📦 List of our other package

⛵ Join us

May you want to share more than a pull request check our jobs opportunity

License

This project is MIT licensed.