@zolaha/react-noto-animated-emoji 2.2.1 → 2.2.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +85 -38
  2. package/package.json +2 -2
package/README.md CHANGED
@@ -1,75 +1,122 @@
1
1
  # @zolaha/react-noto-animated-emoji
2
2
 
3
- High-quality, lightweight animated emojis for React, powered by Google's Noto Animated Emojis and Lottie.
3
+ Beautiful animated emojis for your React apps. Great for chats, blogs, and websites. Includes an emoji picker and easy ways to control the animations.
4
4
 
5
5
  [![NPM Version](https://img.shields.io/npm/v/@zolaha/react-noto-animated-emoji.svg)](https://www.npmjs.com/package/@zolaha/react-noto-animated-emoji)
6
6
  [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
7
+ [![Playground](https://img.shields.io/badge/Playground-Live%20Demo-brightgreen)](https://animated-emoji-package-documentatio.vercel.app/)
8
+
9
+ <a href="https://animated-emoji-package-documentatio.vercel.app/" target="_blank"><strong>Interactive Playground & Documentation</strong></a>
7
10
 
8
11
  ## Features
9
12
 
10
- - **🚀 Lightweight**: No heavy local assets. Animations are fetched on-demand from Google Fonts CDN.
11
- - **📦 Small Bundle**: < 10KB (gzipped) including all support data (via tree-shaking).
12
- - **💾 Global Cache**: Automatically caches animation data to prevent redundant network requests.
13
- - **🎨 Flexible**: Supports custom sizes, fallbacks, looping, and more.
14
- - **⚡ Performance**: Built with Vite and supports ESM/CJS.
13
+ - **Nice Animations**: Uses Google Noto Animated Emojis.
14
+ - **Small & Fast**: Doesn't make your app slow. Emojis load from the web when needed.
15
+ - **Fast Loading**: Remembers emojis so it doesn't download the same thing twice.
16
+ - **Easy Controls**: Change speed, loop behavior, or play on hover.
17
+ - **Ready-to-use Picker**: Comes with a built-in emoji list and search.
15
18
 
16
19
  ## Installation
17
20
 
18
21
  ```bash
19
- npm install @zolaha/react-noto-animated-emoji lottie-react
20
- # or
21
- yarn add @zolaha/react-noto-animated-emoji lottie-react
22
+ npm install @zolaha/react-noto-animated-emoji
22
23
  ```
23
24
 
24
- > **Note**: `lottie-react` is a peer dependency to give you control over the version used in your project.
25
+ ---
25
26
 
26
- ## Usage
27
+ ## 1. Using a Single Emoji
28
+
29
+ Use this when you want to show just one emoji using its code.
27
30
 
28
- ```tsx
29
31
  ```tsx
30
32
  import { AnimatedEmoji } from '@zolaha/react-noto-animated-emoji';
31
33
 
32
34
  function App() {
33
35
  return (
34
- <div>
35
- {/* Basic usage */}
36
- <AnimatedEmoji unified="1f600" size={64} />
37
-
38
- {/* With fallback for unsupported/loading */}
39
- <AnimatedEmoji
40
- unified="1f600"
41
- size={40}
42
- fallback="😀"
43
- loop={true}
44
- onComplete={() => console.log('Animation done!')}
36
+ <AnimatedEmoji
37
+ unified="1f600"
38
+ size={64}
39
+ loop={true}
40
+ replayOnHover={true}
41
+ speed={1.5}
42
+ />
43
+ );
44
+ }
45
+ ```
46
+
47
+ ### Options (Props)
48
+
49
+ | Name | Type | Default | What it does |
50
+ | :--- | :--- | :--- | :--- |
51
+ | `unified` | `string` | **Required** | The emoji code (example: "1f483"). |
52
+ | `size` | `number` | `32` | How big the emoji should be. |
53
+ | `loop` | `boolean \| number` | `false` | Play forever (`true`), once (`false`), or a specific count. |
54
+ | `speed` | `number` | `1` | How fast to play (1 is normal). |
55
+ | `resetOnEnd` | `boolean` | `false` | Go back to first frame when finished. |
56
+ | `replayOnHover` | `boolean` | `false` | Start from beginning when mouse is over it. |
57
+ | `fallback` | `ReactNode` | `undefined` | What to show while loading. |
58
+ | `onComplete` | `() => void` | `undefined` | Runs when the animation finishes. |
59
+
60
+ ---
61
+
62
+ ## 2. Using the Emoji Picker
63
+
64
+ Use this to let users pick an emoji from a list.
65
+
66
+ ```tsx
67
+ import { AnimateEmojiModal } from '@zolaha/react-noto-animated-emoji';
68
+ import { useState } from 'react';
69
+
70
+ function App() {
71
+ const [isOpen, setIsOpen] = useState(false);
72
+
73
+ return (
74
+ <>
75
+ <button onClick={() => setIsOpen(true)}>Choose Emoji</button>
76
+
77
+ <AnimateEmojiModal
78
+ isOpen={isOpen}
79
+ onClose={() => setIsOpen(false)}
80
+ onEmojiSelect={(code) => console.log('Selected:', code)}
81
+ theme="dark"
82
+ position="center"
45
83
  />
46
- </div>
84
+ </>
47
85
  );
48
86
  }
49
87
  ```
50
88
 
51
- ## Props
89
+ ### Picker Options (Props)
52
90
 
53
- | Prop | Type | Default | Description |
91
+ | Name | Type | Default | What it does |
54
92
  | :--- | :--- | :--- | :--- |
55
- | `unified` | `string` | **Required** | The unified codepoint of the emoji (e.g., "1f600"). |
56
- | `size` | `number` | `32` | Size of the emoji in pixels. |
57
- | `fallback` | `ReactNode` | `undefined` | Fallback content to show if not supported or loading. |
58
- | `loop` | `boolean` | `false` | Whether to loop the animation. |
59
- | `autoplay` | `boolean` | `true` | Whether to start playing immediately. |
60
- | `onComplete` | `() => void` | `undefined` | Callback fired when animation finishes. |
61
- | `className` | `string` | `undefined` | CSS class for the container. |
62
- | `style` | `CSSProperties` | `undefined` | Inline styles for the container. |
93
+ | `width` | `number \| string` | `480` | Width of the picker. |
94
+ | `height` | `number \| string` | `520` | Height of the picker. |
95
+ | `position` | `string` | `'center'` | Where it shows up (example: 'top-left'). |
96
+ | `theme` | `'dark' \| 'light'` | `'dark'` | Choose a dark or light look. |
97
+ | `title` | `string` | `"Emoji Picker"` | Title at the top. |
98
+ | `hideHeader`| `boolean` | `false` | Hide the top part. |
99
+ | `autoplay` | `boolean` | `true` | Play emojis in the list automatically. |
100
+ | `replayOnHover`| `boolean` | `true` | Replay list emojis when mouse is over them. |
101
+ | `showOverlay`| `boolean` | `true` | Show a dark background behind the picker. |
102
+ | `closeOnOverlayClick`| `boolean` | `true` | Close when clicking outside. |
103
+
104
+ ---
63
105
 
64
- ## Utility Functions
106
+ ## Helper Functions
65
107
 
66
108
  ```tsx
67
109
  import { isEmojiAnimated, getEmojiAnimationUrl } from '@zolaha/react-noto-animated-emoji';
68
110
 
69
- console.log(isEmojiAnimated("1f600")); // true
70
- console.log(getEmojiAnimationUrl("1f600")); // https://fonts.gstatic.com/...
111
+ // See if an emoji is available
112
+ isEmojiAnimated("1f600"); // true
113
+
114
+ // Get the link to the animation file
115
+ getEmojiAnimationUrl("1f600");
71
116
  ```
72
117
 
73
- ## License
118
+ ## Credits
119
+ Uses [Google Noto Animated Emojis](https://github.com/googlefonts/noto-emoji).
74
120
 
121
+ ## License
75
122
  MIT © 2026
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zolaha/react-noto-animated-emoji",
3
- "version": "2.2.1",
3
+ "version": "2.2.3",
4
4
  "description": "High-quality animated emojis for React using Google Noto animations and Lottie.",
5
5
  "main": "./dist/index.cjs.js",
6
6
  "module": "./dist/index.es.js",
@@ -21,7 +21,7 @@
21
21
  "noto",
22
22
  "google"
23
23
  ],
24
- "author": "",
24
+ "author": "Rishi Ratan Mishra",
25
25
  "license": "MIT",
26
26
  "peerDependencies": {
27
27
  "react": "^18.0.0 || ^19.0.0",