An emoji component for React that has accessibility and Twemoji support!

Emoji.tsx

import React, { useRef, useEffect } from "react";
import { SpanPropsWithoutRef } from "react-html-props";
import assert from "assert";
import twemoji from "twemoji";

export interface EmojiProps extends SpanPropsWithoutRef {
  symbol: string;
}

export const Emoji = ({ symbol, "aria-label": ariaLabel, ...props }: EmojiProps) => {
  const ref = useRef<HTMLSpanElement>(null);

  useEffect(() => {
    assert(ref.current !== null);
    twemoji.parse(ref.current, {
      folder: "svg",
      ext: ".svg",
    });
  });

  return (
    <span
      ref={ref}
      aria-hidden={ariaLabel ? undefined : true}
      role="img"
      {...props}
    >
      {symbol}
    </span>
  );
};

global.css

/* This CSS is required, make sure its global */

img.emoji {
   height: 1em;
   width: 1em;
   margin: 0 .05em 0 .1em;
   vertical-align: -0.1em;
   display: inline-block;
}