TikTok Emojis React Components

import React, { useState, useMemo } from "react";

import * as TikTokEmojis from "@tiktok-emojis/react";

type ValueOf<T> = T[keyof T];

type Component = ValueOf<typeof TikTokEmojis>;

function resolve(record: Record<string, Component>, code: string) {

  const key = code?.charAt(0).toUpperCase() + code.slice(1);

  const result = record[key];

  return result;

}

export default function App() {

  const [selected, setSelected] = useState("Smile");

  const element = useMemo(() => resolve(TikTokEmojis, selected), [selected]);

  return (

    <div style={{ display: "flex", justifyContent: "center", alignItems: "center" }}>

      <select onChange={event => setSelected(event?.target?.value)}>

        <option value="Smile">Smile</option>

        <option value="Happy">Happy</option>

        <option value="Angry">Angry</option>

      </select>

      <div style={{ marginLeft: "50px" }}>

        {React.createElement(element, { size: 64 })}

      </div>

    </div>

  );

}

// Using size prop (recommended)

<Smile size={32} />

<Happy size="2rem" />

// Using width and height individually

<Cry width={24} height={24} />

<Laugh width="1.5em" height="1.5em" />

// Default size (24px) if no props provided

<Angel />