Theodore is a text input that replaces emoji characters with custom images, ensuring consistent display across all browsers
Experience consistent emoji rendering in action
Quick Insert:
Use Theodore in web apps to consistently render emojis on every browser
Ensures emojis look the same on Chrome, Firefox, Safari, Edge, and all modern browsers.
Built-in undo history so users can revert edits instantly with Ctrl+Z.
Minimal overhead with maximum performance. Won't slow down your application.
Fully typed definitions for a better developer experience and fewer bugs.
Get up and running in seconds
npm install theodore-jsimport React, { useRef } from 'react';
import { Theodore, TheodoreHandle, 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 theodoreRef = useRef<TheodoreHandle>(null);
const editorState = useEditorState();
const handleSelectEmoji = (emoji: { native: string }) => {
theodoreRef.current?.insertEmoji(emoji.native);
};
return (
<Theodore
ref={theodoreRef}
editorState={editorState}
renderEmoji={renderEmoji}
placeholder="Write something..."
maxLines={5}
/>
);
};For more detailed examples, API reference, and advanced usage, visit the documentation on github.
View on GitHub