@zolaha/react-noto-animated-emoji

Beautiful animated emojis for your React apps. Great for chats, blogs, and websites. Includes an emoji picker and easy ways to control the animations.

Interactive Playground & Documentation

Features

• Nice Animations: Uses Google Noto Animated Emojis.
• Small & Fast: Doesn't make your app slow. Emojis load from the web when needed.
• Fast Loading: Remembers emojis so it doesn't download the same thing twice.
• Easy Controls: Change speed, loop behavior, or play on hover.
• Ready-to-use Picker: Comes with a built-in emoji list and search.

Installation

npm install @zolaha/react-noto-animated-emoji

1. Using a Single Emoji

Use this when you want to show just one emoji using its code.

import { AnimatedEmoji } from '@zolaha/react-noto-animated-emoji';

function App() {
  return (
    <AnimatedEmoji 
      unified="1f600" 
      size={64} 
      loop={true} 
      replayOnHover={true}
      speed={1.5}
    />
  );
}

Options (Props)

| Name | Type | Default | What it does | | :--- | :--- | :--- | :--- | | unified | string | Required | The emoji code (example: "1f483"). | | size | number | 32 | How big the emoji should be. | | loop | boolean \| number | false | Play forever (true), once (false), or a specific count. | | speed | number | 1 | How fast to play (1 is normal). | | resetOnEnd | boolean | false | Go back to first frame when finished. | | replayOnHover | boolean | false | Start from beginning when mouse is over it. | | fallback | ReactNode | undefined | What to show while loading. | | onComplete | () => void | undefined | Runs when the animation finishes. |

2. Using the Emoji Picker

Use this to let users pick an emoji from a list.

import { AnimateEmojiModal } from '@zolaha/react-noto-animated-emoji';
import { useState } from 'react';

function App() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <button onClick={() => setIsOpen(true)}>Choose Emoji</button>
      
      <AnimateEmojiModal 
        isOpen={isOpen} 
        onClose={() => setIsOpen(false)}
        onEmojiSelect={(code) => console.log('Selected:', code)}
        theme="dark"
        position="center"
      />
    </>
  );
}

Picker Options (Props)

| Name | Type | Default | What it does | | :--- | :--- | :--- | :--- | | width | number \| string | 480 | Width of the picker. | | height | number \| string | 520 | Height of the picker. | | position | string | 'center' | Where it shows up (example: 'top-left'). | | theme | 'dark' \| 'light' | 'dark' | Choose a dark or light look. | | title | string | "Emoji Picker" | Title at the top. | | hideHeader| boolean | false | Hide the top part. | | autoplay | boolean | true | Play emojis in the list automatically. | | replayOnHover| boolean | true | Replay list emojis when mouse is over them. | | showOverlay| boolean | true | Show a dark background behind the picker. | | closeOnOverlayClick| boolean | true | Close when clicking outside. |

Helper Functions

import { isEmojiAnimated, getEmojiAnimationUrl } from '@zolaha/react-noto-animated-emoji';

// See if an emoji is available
isEmojiAnimated("1f600"); // true

// Get the link to the animation file
getEmojiAnimationUrl("1f600"); 

Credits

Uses Google Noto Animated Emojis.

License

MIT © 2026