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)

Since Twemoji doesn't play nicely with any type of custom Image component, like the drop-in Image replacement in Next.js, I ended up simplifying things even further:

// Twemoji.js
import React, { memo } from "react"
import Image from "next/image"

const isRequired = () => {
  throw new Error("You need to specify an emoji for the Twemoji component")
}

const Twemoji = ({ emoji = isRequired() }) => {
  const img = emoji.codePointAt(0).toString(16)

  console.log(img)
  return (
    <Image
      src={`https://twemoji.maxcdn.com/v/latest/svg/${img}.svg`}
      height="72"
      width="72"
      alt={emoji}
    />
  )
}

export default memo(Twemoji)

You'll need to add domains: ["twemoji.maxcdn.com"] to the appropriate place in the next.config.js file to make this work.

You could debate specifying alt="" instead of alt={emoji} for this type of decorative use of an emoji, but I think it's fine.

This is also a more programmer-friendly version than trying to comply with ESLint's emoji rule for a11y.

Thanks for the help @chibicode !

@DoctorDerek Brilliant! Thanks.

@DoctorDerek You save me couple of hours! Thanks.

Fix : 30-fe0f-20e3.svg => 30-20e3.svg .

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 | string
  height?: number | string
}) {
  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}
      draggable={false}
    />
  )
}

export default React.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);