40 lines
1.3 KiB
TypeScript
40 lines
1.3 KiB
TypeScript
import { useState } from "react";
|
|
|
|
interface EmojiProps {
|
|
unified: string;
|
|
size?: number;
|
|
}
|
|
|
|
export function Emoji(props: EmojiProps) {
|
|
const [error, setError] = useState(false);
|
|
const [loaded, setLoaded] = useState(false);
|
|
|
|
const handleError = () => setError(true);
|
|
const handleLoad = () => setLoaded(true);
|
|
|
|
return (
|
|
<>
|
|
<span style={{ userSelect: 'auto' }}>
|
|
{!error && (
|
|
<>
|
|
<img
|
|
style={{
|
|
width: props.size ? `${props.size}px` : '1.4em',
|
|
height: props.size ? `${props.size}px` : '1.4em',
|
|
verticalAlign: 'sub',
|
|
marginLeft: '2px',
|
|
marginRight: '2px',
|
|
// display: loaded ? 'inline' : 'none'
|
|
}}
|
|
onError={handleError}
|
|
onLoad={handleLoad}
|
|
src={`https://cdn.jsdelivr.net/npm/emoji-datasource-apple/img/apple/64/${props.unified}.png`}
|
|
alt={props.unified}
|
|
/>
|
|
</>
|
|
)}
|
|
{error && props.unified}
|
|
</span>
|
|
</>
|
|
)
|
|
} |