@zolaha/react-noto-animated-emoji 2.2.1 → 2.2.2
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.
- package/README.md +82 -38
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,75 +1,119 @@
|
|
|
1
1
|
# @zolaha/react-noto-animated-emoji
|
|
2
2
|
|
|
3
|
-
|
|
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
|
[](https://www.npmjs.com/package/@zolaha/react-noto-animated-emoji)
|
|
6
6
|
[](https://opensource.org/licenses/MIT)
|
|
7
7
|
|
|
8
8
|
## Features
|
|
9
9
|
|
|
10
|
-
- **🚀
|
|
11
|
-
- **📦 Small
|
|
12
|
-
- **💾
|
|
13
|
-
- **🎨
|
|
14
|
-
-
|
|
10
|
+
- **🚀 Nice Animations**: Uses Google Noto Animated Emojis.
|
|
11
|
+
- **📦 Small & Fast**: Doesn't make your app slow. Emojis load from the web when needed.
|
|
12
|
+
- **💾 Fast Loading**: Remembers emojis so it doesn't download the same thing twice.
|
|
13
|
+
- **🎨 Easy Controls**: Change speed, loop behavior, or play on hover.
|
|
14
|
+
- **🛠️ Ready-to-use Picker**: Comes with a built-in emoji list and search.
|
|
15
15
|
|
|
16
16
|
## Installation
|
|
17
17
|
|
|
18
18
|
```bash
|
|
19
|
-
npm install @zolaha/react-noto-animated-emoji
|
|
20
|
-
# or
|
|
21
|
-
yarn add @zolaha/react-noto-animated-emoji lottie-react
|
|
19
|
+
npm install @zolaha/react-noto-animated-emoji
|
|
22
20
|
```
|
|
23
21
|
|
|
24
|
-
|
|
22
|
+
---
|
|
25
23
|
|
|
26
|
-
##
|
|
24
|
+
## 1. Using a Single Emoji
|
|
25
|
+
|
|
26
|
+
Use this when you want to show just one emoji using its code.
|
|
27
27
|
|
|
28
|
-
```tsx
|
|
29
28
|
```tsx
|
|
30
29
|
import { AnimatedEmoji } from '@zolaha/react-noto-animated-emoji';
|
|
31
30
|
|
|
32
31
|
function App() {
|
|
33
32
|
return (
|
|
34
|
-
<
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
{
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
33
|
+
<AnimatedEmoji
|
|
34
|
+
unified="1f600"
|
|
35
|
+
size={64}
|
|
36
|
+
loop={true}
|
|
37
|
+
replayOnHover={true}
|
|
38
|
+
speed={1.5}
|
|
39
|
+
/>
|
|
40
|
+
);
|
|
41
|
+
}
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
### Options (Props)
|
|
45
|
+
|
|
46
|
+
| Name | Type | Default | What it does |
|
|
47
|
+
| :--- | :--- | :--- | :--- |
|
|
48
|
+
| `unified` | `string` | **Required** | The emoji code (example: "1f483"). |
|
|
49
|
+
| `size` | `number` | `32` | How big the emoji should be. |
|
|
50
|
+
| `loop` | `boolean \| number` | `false` | Play forever (`true`), once (`false`), or a specific count. |
|
|
51
|
+
| `speed` | `number` | `1` | How fast to play (1 is normal). |
|
|
52
|
+
| `resetOnEnd` | `boolean` | `false` | Go back to first frame when finished. |
|
|
53
|
+
| `replayOnHover` | `boolean` | `false` | Start from beginning when mouse is over it. |
|
|
54
|
+
| `fallback` | `ReactNode` | `undefined` | What to show while loading. |
|
|
55
|
+
| `onComplete` | `() => void` | `undefined` | Runs when the animation finishes. |
|
|
56
|
+
|
|
57
|
+
---
|
|
58
|
+
|
|
59
|
+
## 2. Using the Emoji Picker
|
|
60
|
+
|
|
61
|
+
Use this to let users pick an emoji from a list.
|
|
62
|
+
|
|
63
|
+
```tsx
|
|
64
|
+
import { AnimateEmojiModal } from '@zolaha/react-noto-animated-emoji';
|
|
65
|
+
import { useState } from 'react';
|
|
66
|
+
|
|
67
|
+
function App() {
|
|
68
|
+
const [isOpen, setIsOpen] = useState(false);
|
|
69
|
+
|
|
70
|
+
return (
|
|
71
|
+
<>
|
|
72
|
+
<button onClick={() => setIsOpen(true)}>Choose Emoji</button>
|
|
73
|
+
|
|
74
|
+
<AnimateEmojiModal
|
|
75
|
+
isOpen={isOpen}
|
|
76
|
+
onClose={() => setIsOpen(false)}
|
|
77
|
+
onEmojiSelect={(code) => console.log('Selected:', code)}
|
|
78
|
+
theme="dark"
|
|
79
|
+
position="center"
|
|
45
80
|
/>
|
|
46
|
-
|
|
81
|
+
</>
|
|
47
82
|
);
|
|
48
83
|
}
|
|
49
84
|
```
|
|
50
85
|
|
|
51
|
-
|
|
86
|
+
### Picker Options (Props)
|
|
52
87
|
|
|
53
|
-
|
|
|
88
|
+
| Name | Type | Default | What it does |
|
|
54
89
|
| :--- | :--- | :--- | :--- |
|
|
55
|
-
| `
|
|
56
|
-
| `
|
|
57
|
-
| `
|
|
58
|
-
| `
|
|
59
|
-
| `
|
|
60
|
-
| `
|
|
61
|
-
| `
|
|
62
|
-
| `
|
|
90
|
+
| `width` | `number \| string` | `480` | Width of the picker. |
|
|
91
|
+
| `height` | `number \| string` | `520` | Height of the picker. |
|
|
92
|
+
| `position` | `string` | `'center'` | Where it shows up (example: 'top-left'). |
|
|
93
|
+
| `theme` | `'dark' \| 'light'` | `'dark'` | Choose a dark or light look. |
|
|
94
|
+
| `title` | `string` | `"Emoji Picker"` | Title at the top. |
|
|
95
|
+
| `hideHeader`| `boolean` | `false` | Hide the top part. |
|
|
96
|
+
| `autoplay` | `boolean` | `true` | Play emojis in the list automatically. |
|
|
97
|
+
| `replayOnHover`| `boolean` | `true` | Replay list emojis when mouse is over them. |
|
|
98
|
+
| `showOverlay`| `boolean` | `true` | Show a dark background behind the picker. |
|
|
99
|
+
| `closeOnOverlayClick`| `boolean` | `true` | Close when clicking outside. |
|
|
100
|
+
|
|
101
|
+
---
|
|
63
102
|
|
|
64
|
-
##
|
|
103
|
+
## Helper Functions
|
|
65
104
|
|
|
66
105
|
```tsx
|
|
67
106
|
import { isEmojiAnimated, getEmojiAnimationUrl } from '@zolaha/react-noto-animated-emoji';
|
|
68
107
|
|
|
69
|
-
|
|
70
|
-
|
|
108
|
+
// See if an emoji is available
|
|
109
|
+
isEmojiAnimated("1f600"); // true
|
|
110
|
+
|
|
111
|
+
// Get the link to the animation file
|
|
112
|
+
getEmojiAnimationUrl("1f600");
|
|
71
113
|
```
|
|
72
114
|
|
|
73
|
-
##
|
|
115
|
+
## Credits
|
|
116
|
+
Uses [Google Noto Animated Emojis](https://github.com/googlefonts/noto-emoji).
|
|
74
117
|
|
|
118
|
+
## License
|
|
75
119
|
MIT © 2026
|
package/package.json
CHANGED