Theodore 😄

Theodore is an emoji-friendly, content-editable text input for React. It replaces native emoji characters with your own images so they render consistently across browsers.

• Consistent emoji rendering across platforms and browsers
• Bring your own emoji assets (e.g., Apple / Google / Twitter sets) and rendering
• Ctrl+Z works very well after inserting text or emoji

📚 Documentation: https://theodore-js.dev/docs
🧪 Playground: https://theodore-js.dev

Installation

npm install theodore-js

Example Usage

import React from 'react';
import { Theodore, useEditorState } from 'theodore-js';
import 'theodore-js/style.css';

const renderEmoji = (emoji: string) => {
  if (emoji === '') return <></>;
  const unified = nativeToUnified(emoji);
  const path = `/img-apple-64/${unified}.png`;
  return <img src={path} width={22} height={22} alt={emoji} />;
};

export const TheodoreTextInput: React.FC = () => {
  const editorState = useEditorState();

  return <Theodore editorState={editorState} renderEmoji={renderEmoji} />;
};

License

MIT©Theodore contributors