A lightweight, system-compatible Emoji Picker component in React + TypeScript, using Unicode ranges of well-supported emojis only. Ideal for embedding in apps where a small set of safe emojis is preferred over full emoji libraries.

EmojiGrid.tsx

import React from "react";

// ✅ Safe emoji Unicode blocks
const emojiRanges = [
  [0x1f600, 0x1f64f], // Emoticons (faces, gestures, emotions)
  [0x1f680, 0x1f6c5], // Transport & map symbols
  [0x2600, 0x26ff], // Miscellaneous symbols
  [0x2700, 0x27bf], // Dingbats

  [0x1f300, 0x1f320], // Natural elements
  [0x1f330, 0x1f335], // Plants
  [0x1f337, 0x1f37c], // Food & drink (widely supported)
  [0x1f380, 0x1f393], // Celebration & school items

  [0x1f600, 0x1f64f], // Emoticons (safe)
  [0x1f680, 0x1f6c5], // Transport (safe)
  [0x2600, 0x26ff], // Misc symbols
  [0x2700, 0x27bf], // Dingbats
];

// Flatten emoji list
const emojis = emojiRanges.flatMap(([start, end]) =>
  Array.from({ length: end - start + 1 }, (_, i) =>
    String.fromCodePoint(start + i)
  )
);

export const EmojiGrid: React.FC<{ onChoose: (e: string) => void }> = ({
  onChoose,
}) => (
  <div
    style={{
      display: "grid",
      gridTemplateColumns: "repeat(auto-fill, minmax(32px, 1fr))",
      gap: "4px",
      overflowY: "auto",
    }}
  >
    {emojis.map((emoji, i) => (
      <button
        key={i}
        onClick={() => onChoose(emoji)}
        style={{
          fontSize: "24px",
          width: "36px",
          height: "36px",
          padding: 0,
          border: "none",
          background: "transparent",
        }}
      >
        {emoji}
      </button>
    ))}
  </div>
);