animated-fluent-emojis/dist/animated-fluent-emojis.umd.js

Animated Fluent Emojis is a React component library that brings Microsoft's Fluent emojis to life in your web applications. This library offers an easy way to integrate expressive and engaging animated emojis, enhancing user experience and visual appeal i

(function(m,f){typeof exports=="object"&&typeof module<"u"?f(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],f):(m=typeof globalThis<"u"?globalThis:m||self,f(m["Animated-Fluent-Emojis"]={},m.jsxRuntime,m.React))})(this,function(m,f,s){"use strict";async function M(){return(await fetch("https://cdn.animated-fluent-emojis.com/manifest.json")).json()}async function v(){return(await M()).categories.reduce((t,n)=>({...t,...Object.fromEntries(n.emoticons.map(a=>[a.id,{...a,category:n.title}]))}),{})}const j=v();async function S(e){const n=(await j)[e];if(!n)throw new Error(`Emoji with id "${e}" not found`);return n.category}async function C(e,t){const a=(await j)[e];if(!a)throw new Error(`Emoji with id "${e}" not found`);return`
    @keyframes emoji-${e}-${t} {
      0% { transform: translateY(0); }
      100% { transform: translateY(-${a.animation.framesCount*t}px); }
    }
  `}const x=(e,t,n,a,r)=>{const[i,u]=s.useState(!a),[c,h]=s.useState(!1),E=s.useRef(0),d=s.useRef(null);s.useEffect(()=>{if(!e)return;const o=()=>{E.current+=1,typeof n=="number"&&E.current>=n&&!i&&u(!0)},y=()=>{i||u(!0)},l=d.current;return l&&(l.addEventListener("animationiteration",o),l.addEventListener("animationend",y)),()=>{l&&(l.removeEventListener("animationiteration",o),l.removeEventListener("animationend",y))}},[e,n,i]),s.useEffect(()=>{if(!t||!i||!e)return;const o=d.current;o&&(c?o.style.animationPlayState="running":(o.style.animationPlayState="paused",o.style.transform=`translateY(-${(e.animation.firstFrame-1)*r}px)`))},[c,t,i,e,r]);const p=s.useMemo(()=>e?{width:r,animationName:`emoji-${e.id}-${r}`,animationDuration:`${e.animation.framesCount/e.animation.fps}s`,animationTimingFunction:`steps(${e.animation.framesCount})`,animationIterationCount:i&&t?"infinite":n,animationPlayState:a&&!i||i&&t&&c?"running":"paused",transform:`translateY(-${(e.animation.firstFrame-1)*r}px)`}:{},[e,r,i,t,n,a,c]);return{isInitialAnimationComplete:i,animationStyle:p,handleMouseEnter:()=>h(!0),handleMouseLeave:()=>h(!1),imageRef:d}},I=e=>{const[t,n]=s.useState(null),[a,r]=s.useState("");return s.useEffect(()=>{(async()=>{try{const u=await j;n(u[e]),r(await S(e))}catch(u){console.error("Error fetching emoji data:",u),n(null),r("")}})()},[e]),{emoji:t,categoryFolder:a}},g={emojiImage:"_emojiImage_1jsok_1",animateOnHover:"_animateOnHover_1jsok_9"},L=({id:e,size:t=100,playOnHover:n=!1,animationIterations:a=2,autoPlay:r=!0})=>{const{emoji:i,categoryFolder:u}=I(e),{isInitialAnimationComplete:c,animationStyle:h,handleMouseEnter:E,handleMouseLeave:d,imageRef:p}=x(i,n,a,r,t);if(s.useEffect(()=>{if(!i)return;const $=`emoji-style-${e}-${t}`;let o=document.getElementById($);return o||(o=document.createElement("style"),o.id=$,document.head.appendChild(o)),C(e,t).then(y=>{o&&(o.innerHTML=y)}),()=>{o&&document.head.contains(o)&&document.head.removeChild(o)}},[e,t,i]),!i)return null;const w={width:`${t}px`,height:`${t}px`,display:"inline-block",overflow:"hidden"};return f.jsx("span",{title:i.description,style:w,className:`${g.emojiContainer} ${c&&n?g.animateOnHover:""}`,onMouseEnter:E,onMouseLeave:d,children:f.jsx("img",{ref:p,alt:i.description,draggable:"false",src:`https://cdn.animated-fluent-emojis.com/sprites/${u}/${e}.png`,style:h,className:g.emojiImage})})};m.Emoji=L,Object.defineProperty(m,Symbol.toStringTag,{value:"Module"})});
//# sourceMappingURL=animated-fluent-emojis.umd.js.map