A dead simple React.js Twemoji component.

README-Twemoji-React.md

Twemoji + React

A dead simple React Twemoji component.

Requirements: twemoji

npm install --save twemoji

# or

yarn add twemoji

Twemoji-Example.js

import React from 'react'
import Twemoji from './Twemoji'

const Example = () => (
  <p>
    Hello! <Twemoji emoji="👋" />
  </p>
)

export default Example

Twemoji.css

.emoji {
  display: inline-block;
  width: auto;
  height: 1em;
  vertical-align: -0.125em;
}

Twemoji.js

import React, { memo } from 'react'
import twemoji from 'twemoji'

const Twemoji = ({ emoji }) => (
  <span
    dangerouslySetInnerHTML={{
      __html: twemoji.parse(emoji, {
        folder: 'svg',
        ext: '.svg'
      })
    }}
  />
)

export default memo(Twemoji)

@NekoChanTaiwan works great, thanks for sharing!

UPDATE

import React from 'react';
import NextImage from 'next/image';
import twemoji from 'twemoji';

const U200D = String.fromCharCode(0x200d);
const UFE0Fg = /\uFE0F/g;

function Twemoji({
  emoji,
  ext = 'svg',
  width = 72,
  height = 72,
}: {
  emoji: string
  ext?: 'svg' | 'png'
  width?: number
  height?: number
}) {
  const HEXCodePoint = twemoji.convert.toCodePoint(
    emoji.indexOf(U200D) < 0 ? emoji.replace(UFE0Fg, '') : emoji,
  );

  return (
    <NextImage
      src={`https://twemoji.maxcdn.com/v/latest/${ext === 'png' ? '72x72' : 'svg'}/${HEXCodePoint}.${ext}`}
      width={width}
      height={height}
      alt={emoji}
      loading="lazy"
      draggable={false}
    />
  );
}

export default React.memo(Twemoji);