Fuzzy-Searchable Emoji Picker

ts/components/emoji/Emoji.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { getSheetCoordinates, SkinToneKey } from './lib';
+
+export type OwnProps = {
+  inline?: boolean;
+  shortName: string;
+  skinTone?: SkinToneKey | number;
+  size?: 16 | 20 | 28 | 32 | 64 | 66;
+};
+
+export type Props = OwnProps &
+  Pick<React.HTMLProps<HTMLDivElement>, 'style' | 'className'>;
+
+export const Emoji = React.memo(
+  React.forwardRef<HTMLDivElement, Props>(
+    (
+      { style = {}, size = 28, shortName, skinTone, inline, className }: Props,
+      ref
+    ) => {
+      const [sheetX, sheetY] = getSheetCoordinates(shortName, skinTone);
+      const x = -(size * sheetX);
+      const y = -(size * sheetY);
+
+      return (
+        <div
+          ref={ref}
+          className={classNames(
+            'module-emoji',
+            `module-emoji--${size}px`,
+            inline ? 'module-emoji--inline' : null,
+            className
+          )}
+          style={{
+            ...style,
+            backgroundPositionX: `${x}px`,
+            backgroundPositionY: `${y}px`,
+          }}
+        />
+      );
+    }
+  )
+);