@jepepa/like-button 0.8.0
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/LICENSE +22 -0
- package/README.md +373 -0
- package/dist/chunk-WTGBDIZW.js +841 -0
- package/dist/chunk-WTGBDIZW.js.map +1 -0
- package/dist/index.d.ts +580 -0
- package/dist/index.js +22 -0
- package/dist/index.js.map +1 -0
- package/dist/vanilla.d.ts +2 -0
- package/dist/vanilla.js +22 -0
- package/dist/vanilla.js.map +1 -0
- package/package.json +74 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2024 Jepepa
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
|
22
|
+
|
package/README.md
ADDED
|
@@ -0,0 +1,373 @@
|
|
|
1
|
+
# React Multi Like Button
|
|
2
|
+
|
|
3
|
+
| Custom hearth with on complete state | Classic button | Like shaped cursor | Gold stars particle |
|
|
4
|
+
|--------|--------|--------|--------|
|
|
5
|
+
|  |  |  |  |
|
|
6
|
+
|
|
7
|
+
_(The gifs are accelerated and chopped, the effects would render better in real life)_
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
An animated like button component with liquid fill effect and customizable particle animations. Available in both Tailwind CSS and vanilla CSS versions.
|
|
11
|
+
|
|
12
|
+
## Features
|
|
13
|
+
|
|
14
|
+
- 🎨 **Liquid Fill Animation** - Smooth wave effect that fills the button (that's why it's called "multi like")
|
|
15
|
+
- ✨ **Particle Effects** - 5 built-in presets + full customization when you click
|
|
16
|
+
- 🎯 **Multiple Clicks** - Track multiple likes with configurable max. You can configure 1 click to fill the like, or multiple ones.
|
|
17
|
+
- 🎭 **Custom Shapes** - Circle, rounded, or custom
|
|
18
|
+
- 🖱️ **Custom Cursors** - Built-in presets (heart, star, thumbs-up) or custom
|
|
19
|
+
- 🎨 **Fully Customizable** - Colors, sizes, styles, and more
|
|
20
|
+
- 📦 **Two Versions** - Tailwind CSS or vanilla CSS
|
|
21
|
+
- ♿ **Accessible** - ARIA labels and keyboard support
|
|
22
|
+
- 📱 **Responsive** - Works on all screen sizes
|
|
23
|
+
- 🔒 **TypeScript** - Full type safety
|
|
24
|
+
|
|
25
|
+
## Installation
|
|
26
|
+
|
|
27
|
+
```bash
|
|
28
|
+
npm install @jepepa/like-button
|
|
29
|
+
# or
|
|
30
|
+
yarn add @jepepa/like-button
|
|
31
|
+
# or
|
|
32
|
+
pnpm add @jepepa/like-button
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
## Quick Start
|
|
36
|
+
|
|
37
|
+
### Tailwind CSS Version
|
|
38
|
+
|
|
39
|
+
```tsx
|
|
40
|
+
import { LikeButton } from '@jepepa/like-button';
|
|
41
|
+
|
|
42
|
+
function App() {
|
|
43
|
+
return (
|
|
44
|
+
<LikeButton
|
|
45
|
+
onClick={(clicks) => console.log('Total clicks:', clicks)}
|
|
46
|
+
particlePreset="burst"
|
|
47
|
+
/>
|
|
48
|
+
);
|
|
49
|
+
}
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
### Vanilla CSS Version
|
|
53
|
+
|
|
54
|
+
```tsx
|
|
55
|
+
import { LikeButtonVanilla } from '@jepepa/like-button';
|
|
56
|
+
import '@jepepa/like-button/styles.css';
|
|
57
|
+
|
|
58
|
+
function App() {
|
|
59
|
+
return (
|
|
60
|
+
<LikeButtonVanilla
|
|
61
|
+
onClick={(clicks) => console.log('Total clicks:', clicks)}
|
|
62
|
+
particlePreset="confetti"
|
|
63
|
+
/>
|
|
64
|
+
);
|
|
65
|
+
}
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
## Particle Effects
|
|
69
|
+
|
|
70
|
+
### Built-in Presets
|
|
71
|
+
|
|
72
|
+
Choose from 5 professionally designed particle effects:
|
|
73
|
+
|
|
74
|
+
```tsx
|
|
75
|
+
// Quick explosion of hearts (12 particles)
|
|
76
|
+
<LikeButton particlePreset="burst" />
|
|
77
|
+
|
|
78
|
+
// Upward spray effect (10 particles)
|
|
79
|
+
<LikeButton particlePreset="fountain" />
|
|
80
|
+
|
|
81
|
+
// Colorful celebration (15 particles)
|
|
82
|
+
<LikeButton particlePreset="confetti" />
|
|
83
|
+
|
|
84
|
+
// Subtle floating effect (6 particles)
|
|
85
|
+
<LikeButton particlePreset="gentle" />
|
|
86
|
+
|
|
87
|
+
// Explosive sparkles (16 particles)
|
|
88
|
+
<LikeButton particlePreset="fireworks" />
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
### Custom Particle Configuration
|
|
92
|
+
|
|
93
|
+
Fully customize particle behavior:
|
|
94
|
+
|
|
95
|
+
```tsx
|
|
96
|
+
<LikeButton particleConfig={{
|
|
97
|
+
shape: 'star', // 'heart' | 'star' | 'circle' | 'square' | 'sparkle'
|
|
98
|
+
colors: ['#FFD700', '#FFA500'], // Array of colors
|
|
99
|
+
count: 15, // Number of particles
|
|
100
|
+
speed: 600, // Animation duration (ms)
|
|
101
|
+
distance: { min: 80, max: 120 }, // Travel distance (px)
|
|
102
|
+
spread: 180, // Spread angle (degrees)
|
|
103
|
+
spreadOffset: -90, // Starting angle (0=right, 90=down, 180=left, 270=up)
|
|
104
|
+
size: { min: 1.2, max: 2.0 }, // Size range (scale multiplier)
|
|
105
|
+
easing: 'cubic-bezier(0.22, 1, 0.36, 1)', // CSS easing function
|
|
106
|
+
fadeOut: true // Fade out during animation
|
|
107
|
+
}} />
|
|
108
|
+
```
|
|
109
|
+
|
|
110
|
+
### Combine Preset with Custom Config
|
|
111
|
+
|
|
112
|
+
Start with a preset and override specific properties:
|
|
113
|
+
|
|
114
|
+
```tsx
|
|
115
|
+
<LikeButton
|
|
116
|
+
particlePreset="burst"
|
|
117
|
+
particleConfig={{
|
|
118
|
+
count: 20,
|
|
119
|
+
colors: ['#ff0000', '#00ff00', '#0000ff']
|
|
120
|
+
}}
|
|
121
|
+
/>
|
|
122
|
+
```
|
|
123
|
+
|
|
124
|
+
## Basic Usage
|
|
125
|
+
|
|
126
|
+
### Click Tracking
|
|
127
|
+
|
|
128
|
+
```tsx
|
|
129
|
+
<LikeButton
|
|
130
|
+
maxClicks={10}
|
|
131
|
+
onClick={(clicks) => console.log('Clicks:', clicks)}
|
|
132
|
+
onRightClick={(clicks) => console.log('Right click at:', clicks)}
|
|
133
|
+
/>
|
|
134
|
+
```
|
|
135
|
+
|
|
136
|
+
### Controlled Mode
|
|
137
|
+
|
|
138
|
+
```tsx
|
|
139
|
+
const [clicks, setClicks] = useState(0);
|
|
140
|
+
|
|
141
|
+
<LikeButton
|
|
142
|
+
localClicks={clicks}
|
|
143
|
+
onClick={(newClicks) => setClicks(newClicks)}
|
|
144
|
+
maxClicks={5}
|
|
145
|
+
/>
|
|
146
|
+
```
|
|
147
|
+
|
|
148
|
+
### Custom Colors
|
|
149
|
+
|
|
150
|
+
```tsx
|
|
151
|
+
<LikeButton
|
|
152
|
+
fillColor="#ff0000"
|
|
153
|
+
waveColor="#ff6666"
|
|
154
|
+
size={120}
|
|
155
|
+
/>
|
|
156
|
+
```
|
|
157
|
+
|
|
158
|
+
### Custom Shapes
|
|
159
|
+
|
|
160
|
+
```tsx
|
|
161
|
+
// Built-in shapes
|
|
162
|
+
<LikeButton shape="circle" />
|
|
163
|
+
<LikeButton shape="rounded" />
|
|
164
|
+
|
|
165
|
+
// Custom clip-path
|
|
166
|
+
<LikeButton shape={{
|
|
167
|
+
clipPath: "polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)"
|
|
168
|
+
}} />
|
|
169
|
+
```
|
|
170
|
+
|
|
171
|
+
### Custom Cursors
|
|
172
|
+
|
|
173
|
+
```tsx
|
|
174
|
+
// Built-in cursor presets
|
|
175
|
+
<LikeButton cursor="heart" />
|
|
176
|
+
<LikeButton cursor="star" />
|
|
177
|
+
<LikeButton cursor="thumbs-up" />
|
|
178
|
+
<LikeButton cursor="pointer" />
|
|
179
|
+
|
|
180
|
+
// Custom cursor
|
|
181
|
+
<LikeButton cursor={{
|
|
182
|
+
url: "data:image/svg+xml;...",
|
|
183
|
+
hotspotX: 16,
|
|
184
|
+
hotspotY: 16,
|
|
185
|
+
fallback: "pointer"
|
|
186
|
+
}} />
|
|
187
|
+
```
|
|
188
|
+
|
|
189
|
+
## Advanced Examples
|
|
190
|
+
|
|
191
|
+
### Celebration Button
|
|
192
|
+
|
|
193
|
+
Perfect for achievements and milestones:
|
|
194
|
+
|
|
195
|
+
```tsx
|
|
196
|
+
<LikeButton
|
|
197
|
+
particlePreset="confetti"
|
|
198
|
+
particleConfig={{
|
|
199
|
+
count: 25,
|
|
200
|
+
speed: 1000,
|
|
201
|
+
distance: { min: 100, max: 150 }
|
|
202
|
+
}}
|
|
203
|
+
fillColor="#FFD700"
|
|
204
|
+
size={100}
|
|
205
|
+
/>
|
|
206
|
+
```
|
|
207
|
+
|
|
208
|
+
### Upvote Button
|
|
209
|
+
|
|
210
|
+
Reddit-style upvote with fountain effect:
|
|
211
|
+
|
|
212
|
+
```tsx
|
|
213
|
+
<LikeButton
|
|
214
|
+
particlePreset="fountain"
|
|
215
|
+
particleConfig={{
|
|
216
|
+
colors: ['#FF4500'],
|
|
217
|
+
shape: 'star'
|
|
218
|
+
}}
|
|
219
|
+
fillColor="#FF4500"
|
|
220
|
+
shape="rounded"
|
|
221
|
+
/>
|
|
222
|
+
```
|
|
223
|
+
|
|
224
|
+
### Subtle Favorite
|
|
225
|
+
|
|
226
|
+
Gentle effect for favorites:
|
|
227
|
+
|
|
228
|
+
```tsx
|
|
229
|
+
<LikeButton
|
|
230
|
+
particlePreset="gentle"
|
|
231
|
+
particleConfig={{
|
|
232
|
+
colors: ['#FFB6C1', '#FFC0CB'],
|
|
233
|
+
fadeOut: true
|
|
234
|
+
}}
|
|
235
|
+
fillColor="#FFB6C1"
|
|
236
|
+
/>
|
|
237
|
+
```
|
|
238
|
+
|
|
239
|
+
### Custom Shape Particles
|
|
240
|
+
|
|
241
|
+
Create custom particle shapes:
|
|
242
|
+
|
|
243
|
+
```tsx
|
|
244
|
+
import type { CustomParticleShape } from '@jepepa/like-button';
|
|
245
|
+
|
|
246
|
+
const customDiamond: CustomParticleShape = {
|
|
247
|
+
render: ({ size, color, className }) => (
|
|
248
|
+
<svg width={size} height={size} className={className} viewBox="0 0 24 24">
|
|
249
|
+
<path d="M12 2 L22 12 L12 22 L2 12 Z" fill={color} />
|
|
250
|
+
</svg>
|
|
251
|
+
)
|
|
252
|
+
};
|
|
253
|
+
|
|
254
|
+
<LikeButton particleConfig={{ shape: customDiamond }} />
|
|
255
|
+
```
|
|
256
|
+
|
|
257
|
+
## API Reference
|
|
258
|
+
|
|
259
|
+
### LikeButton Props
|
|
260
|
+
|
|
261
|
+
| Prop | Type | Default | Description |
|
|
262
|
+
|------|------|---------|-------------|
|
|
263
|
+
| `size` | `number` | `80` | Button size in pixels |
|
|
264
|
+
| `fillColor` | `string` | `"#EF4444"` | Fill color (hex or CSS color) |
|
|
265
|
+
| `waveColor` | `string` | `fillColor` | Wave color (defaults to fillColor) |
|
|
266
|
+
| `maxClicks` | `number` | `Infinity` | Maximum number of clicks allowed |
|
|
267
|
+
| `localClicks` | `number` | - | Controlled mode: current click count |
|
|
268
|
+
| `onClick` | `(clicks: number) => void` | - | Click handler |
|
|
269
|
+
| `onRightClick` | `(clicks: number) => void` | - | Right-click handler |
|
|
270
|
+
| `shape` | `ShapePreset \| CustomShape` | `"heart"` | Button shape |
|
|
271
|
+
| `cursor` | `CursorPreset \| CustomCursor` | `"heart"` | Cursor style |
|
|
272
|
+
| `styles` | `StyleOverrides` | - | Custom style overrides |
|
|
273
|
+
| `renderIcon` | `(props) => ReactNode` | - | Custom icon renderer |
|
|
274
|
+
| `minFillPercent` | `number` | `5` | Minimum fill percentage |
|
|
275
|
+
| `particlePreset` | `ParticlePreset` | - | Particle effect preset |
|
|
276
|
+
| `particleConfig` | `ParticleConfig` | - | Custom particle configuration |
|
|
277
|
+
|
|
278
|
+
### ParticleConfig
|
|
279
|
+
|
|
280
|
+
| Property | Type | Default | Description |
|
|
281
|
+
|----------|------|---------|-------------|
|
|
282
|
+
| `shape` | `ParticleShape` | `'heart'` | Particle shape |
|
|
283
|
+
| `colors` | `string[]` | `['#EF4444', '#B9FF14', '#3B82F6']` | Particle colors |
|
|
284
|
+
| `count` | `number` | `8` | Number of particles |
|
|
285
|
+
| `size` | `number \| Range` | `{ min: 1.0, max: 1.5 }` | Size multiplier |
|
|
286
|
+
| `speed` | `number` | `500` | Animation duration (ms) |
|
|
287
|
+
| `distance` | `number \| Range` | `{ min: 60, max: 100 }` | Travel distance (px) |
|
|
288
|
+
| `spread` | `number` | `360` | Spread angle (degrees) |
|
|
289
|
+
| `spreadOffset` | `number` | `0` | Starting angle offset |
|
|
290
|
+
| `easing` | `string` | `'cubic-bezier(0.22, 1, 0.36, 1)'` | CSS easing |
|
|
291
|
+
| `fadeOut` | `boolean` | `true` | Fade out animation |
|
|
292
|
+
|
|
293
|
+
### ParticlePreset
|
|
294
|
+
|
|
295
|
+
- `'burst'` - Quick explosion of hearts (12 particles)
|
|
296
|
+
- `'fountain'` - Upward spray effect (10 particles)
|
|
297
|
+
- `'confetti'` - Colorful celebration (15 particles)
|
|
298
|
+
- `'gentle'` - Subtle floating effect (6 particles)
|
|
299
|
+
- `'fireworks'` - Explosive sparkles (16 particles)
|
|
300
|
+
|
|
301
|
+
### ParticleShape
|
|
302
|
+
|
|
303
|
+
- `'heart'` - Heart shape ❤️
|
|
304
|
+
- `'star'` - Star shape ⭐
|
|
305
|
+
- `'circle'` - Circle shape ⚫
|
|
306
|
+
- `'square'` - Square shape ◼️
|
|
307
|
+
- `'sparkle'` - Sparkle shape ✨
|
|
308
|
+
- `CustomParticleShape` - Custom shape object
|
|
309
|
+
|
|
310
|
+
## Examples
|
|
311
|
+
|
|
312
|
+
Check out the [examples](./examples) directory for more usage examples.
|
|
313
|
+
|
|
314
|
+
## Browser Support
|
|
315
|
+
|
|
316
|
+
- Chrome/Edge (latest)
|
|
317
|
+
- Firefox (latest)
|
|
318
|
+
- Safari (latest)
|
|
319
|
+
- Mobile browsers (iOS Safari, Chrome Mobile)
|
|
320
|
+
|
|
321
|
+
## Performance
|
|
322
|
+
|
|
323
|
+
The particle system is optimized for performance:
|
|
324
|
+
- Particles are removed from DOM after animation
|
|
325
|
+
- CSS transforms for smooth 60fps animations
|
|
326
|
+
- Configurable particle count for performance tuning
|
|
327
|
+
|
|
328
|
+
**Recommendations:**
|
|
329
|
+
- Use 5-20 particles for frequent interactions
|
|
330
|
+
- Use 20-50 particles for special moments
|
|
331
|
+
- Use 50+ particles sparingly (may impact performance on slower devices)
|
|
332
|
+
|
|
333
|
+
## Accessibility
|
|
334
|
+
|
|
335
|
+
- ARIA labels for screen readers
|
|
336
|
+
- Keyboard support (Enter/Space to click)
|
|
337
|
+
- Particles marked as decorative (`aria-hidden="true"`)
|
|
338
|
+
- Respects `prefers-reduced-motion` (particles disabled)
|
|
339
|
+
|
|
340
|
+
## TypeScript
|
|
341
|
+
|
|
342
|
+
Full TypeScript support with comprehensive type definitions:
|
|
343
|
+
|
|
344
|
+
```tsx
|
|
345
|
+
import type {
|
|
346
|
+
LikeButtonProps,
|
|
347
|
+
ParticleConfig,
|
|
348
|
+
ParticlePreset,
|
|
349
|
+
ParticleShape,
|
|
350
|
+
CustomParticleShape,
|
|
351
|
+
ParticleShapeProps
|
|
352
|
+
} from '@jepepa/like-button';
|
|
353
|
+
```
|
|
354
|
+
|
|
355
|
+
## Contributing
|
|
356
|
+
|
|
357
|
+
Contributions are welcome! Please open an issue or pull request on GitHub.
|
|
358
|
+
|
|
359
|
+
## License
|
|
360
|
+
|
|
361
|
+
MIT © [jepepa](https://jepepa.com)
|
|
362
|
+
|
|
363
|
+
## Credits
|
|
364
|
+
|
|
365
|
+
Created by [jepepa](https://github.com/ChickenVacuum)
|
|
366
|
+
|
|
367
|
+
## Support
|
|
368
|
+
|
|
369
|
+
- 🐛 [Report a bug](https://github.com/ChickenVacuum/react-multi-like-button/issues)
|
|
370
|
+
- 💡 [Request a feature](https://github.com/ChickenVacuum/react-multi-like-button/issues)
|
|
371
|
+
- ⭐ [Star on GitHub](https://github.com/ChickenVacuum/react-multi-like-button)
|
|
372
|
+
|
|
373
|
+
|