@schwitzerskills/emojipicker 1.0.4 → 1.0.5
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 +46 -8
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -33,6 +33,8 @@ picker.on('emojiClick', (emoji) => console.log(emoji.char)) // 😂
|
|
|
33
33
|
|
|
34
34
|
## Installation
|
|
35
35
|
|
|
36
|
+
### npm / yarn / pnpm
|
|
37
|
+
|
|
36
38
|
```bash
|
|
37
39
|
npm install @schwitzerskills/emojipicker
|
|
38
40
|
# or
|
|
@@ -41,6 +43,41 @@ yarn add @schwitzerskills/emojipicker
|
|
|
41
43
|
pnpm add @schwitzerskills/emojipicker
|
|
42
44
|
```
|
|
43
45
|
|
|
46
|
+
### CDN (jsDelivr)
|
|
47
|
+
|
|
48
|
+
No install needed — drop a single script tag into your HTML:
|
|
49
|
+
|
|
50
|
+
```html
|
|
51
|
+
<script src="https://cdn.jsdelivr.net/npm/@schwitzerskills/emojipicker/emoji-picker.js"></script>
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
Full working example:
|
|
55
|
+
|
|
56
|
+
```html
|
|
57
|
+
<!DOCTYPE html>
|
|
58
|
+
<html lang="en">
|
|
59
|
+
<head>
|
|
60
|
+
<meta charset="UTF-8">
|
|
61
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
62
|
+
<title>My App</title>
|
|
63
|
+
</head>
|
|
64
|
+
<body>
|
|
65
|
+
|
|
66
|
+
<input type="text" id="message" placeholder="Type a message...">
|
|
67
|
+
<button id="emoji-btn">😊</button>
|
|
68
|
+
|
|
69
|
+
<script src="https://cdn.jsdelivr.net/npm/@schwitzerskills/emojipicker/emoji-picker.js"></script>
|
|
70
|
+
<script>
|
|
71
|
+
const picker = new EmojiPicker({ container: '#emoji-btn' })
|
|
72
|
+
picker.on('emojiClick', (emoji) => {
|
|
73
|
+
document.querySelector('#message').value += emoji.char
|
|
74
|
+
})
|
|
75
|
+
</script>
|
|
76
|
+
|
|
77
|
+
</body>
|
|
78
|
+
</html>
|
|
79
|
+
```
|
|
80
|
+
|
|
44
81
|
---
|
|
45
82
|
|
|
46
83
|
## Module Formats
|
|
@@ -50,13 +87,13 @@ The library ships as a **UMD build** and supports all environments out of the bo
|
|
|
50
87
|
### CommonJS (Node.js / bundlers)
|
|
51
88
|
|
|
52
89
|
```js
|
|
53
|
-
const EmojiPicker = require('emojipicker
|
|
90
|
+
const EmojiPicker = require('@schwitzerskills/emojipicker')
|
|
54
91
|
```
|
|
55
92
|
|
|
56
93
|
### ES Module
|
|
57
94
|
|
|
58
95
|
```js
|
|
59
|
-
import EmojiPicker from 'emojipicker
|
|
96
|
+
import EmojiPicker from '@schwitzerskills/emojipicker'
|
|
60
97
|
```
|
|
61
98
|
|
|
62
99
|
### Browser global (CDN / script tag)
|
|
@@ -71,7 +108,7 @@ import EmojiPicker from 'emojipicker-js'
|
|
|
71
108
|
### AMD (RequireJS)
|
|
72
109
|
|
|
73
110
|
```js
|
|
74
|
-
define(['emojipicker
|
|
111
|
+
define(['@schwitzerskills/emojipicker'], function(EmojiPicker) {
|
|
75
112
|
const picker = new EmojiPicker({ container: '#btn' })
|
|
76
113
|
})
|
|
77
114
|
```
|
|
@@ -419,7 +456,7 @@ Works out of the box with a standard `import`. Initialize inside `useEffect` so
|
|
|
419
456
|
|
|
420
457
|
```jsx
|
|
421
458
|
import { useEffect, useRef } from 'react'
|
|
422
|
-
import EmojiPicker from 'emojipicker
|
|
459
|
+
import EmojiPicker from '@schwitzerskills/emojipicker'
|
|
423
460
|
|
|
424
461
|
function EmojiButton({ onSelect }) {
|
|
425
462
|
const btnRef = useRef(null)
|
|
@@ -447,7 +484,7 @@ EmojiPicker uses `window` and `document` internally, so it must only run on the
|
|
|
447
484
|
```jsx
|
|
448
485
|
// components/EmojiButton.jsx
|
|
449
486
|
import { useEffect, useRef } from 'react'
|
|
450
|
-
import EmojiPicker from 'emojipicker
|
|
487
|
+
import EmojiPicker from '@schwitzerskills/emojipicker'
|
|
451
488
|
|
|
452
489
|
export default function EmojiButton({ onSelect }) {
|
|
453
490
|
const btnRef = useRef(null)
|
|
@@ -490,7 +527,7 @@ useEffect(() => {
|
|
|
490
527
|
|
|
491
528
|
<script setup>
|
|
492
529
|
import { ref, onMounted, onUnmounted } from 'vue'
|
|
493
|
-
import EmojiPicker from 'emojipicker
|
|
530
|
+
import EmojiPicker from '@schwitzerskills/emojipicker'
|
|
494
531
|
|
|
495
532
|
const emit = defineEmits(['select'])
|
|
496
533
|
const btnRef = ref(null)
|
|
@@ -510,7 +547,7 @@ onUnmounted(() => picker?.destroy())
|
|
|
510
547
|
```svelte
|
|
511
548
|
<script>
|
|
512
549
|
import { onMount, onDestroy, createEventDispatcher } from 'svelte'
|
|
513
|
-
import EmojiPicker from 'emojipicker
|
|
550
|
+
import EmojiPicker from '@schwitzerskills/emojipicker'
|
|
514
551
|
|
|
515
552
|
const dispatch = createEventDispatcher()
|
|
516
553
|
let btnEl
|
|
@@ -674,4 +711,5 @@ Requires `localStorage` for recent emojis — gracefully disabled if unavailable
|
|
|
674
711
|
---
|
|
675
712
|
|
|
676
713
|
## License
|
|
677
|
-
|
|
714
|
+
|
|
715
|
+
Apache
|