2.0.5 • Published 9 months ago
liveemoji v2.0.5
LiveEmoji
LiveEmoji is a delightful collection of animated emoji icons designed for React applications. Bring your user interfaces to life with our vibrant and expressive emojis that seamlessly blend into your projects. With easy-to-use components and customizable options, LiveEmoji empowers developers to enhance their applications with a touch of fun and creativity.
🔗 Links
Features
- Animated emojis: A curated selection of animated emoji icons
- Responsive and customizable: Easily adjust emoji size and apply custom styling
- Optimized for performance: Smooth animations that perform beautifully across devices
- Easy to use: Import and display emojis with simple, intuitive components
- TypeScript support: For robust typing and better developer experience
Installation
You can install LiveEmoji via npm:
npm install liveemoji
Usage
You can use the LiveEmoji component to display animated emojis dynamically. Here's an example of how to use it in your application:
import { LiveEmoji } from 'liveemoji';
<LiveEmoji icon="ConfusedFace" size={32} />
<LiveEmoji icon="ClownFace" size={32} />
<LiveEmoji icon="FaceWithPeekingEye" size={32} />
Props
The LiveEmoji
component accepts the following props:
Prop | Type | Description |
---|---|---|
icon | string | The name of the emoji to display in PascelCase only (e.g., "DizzyFace", "ClownFace"). |
className | string | Optional custom class or TailwindCSS for styling the emoji. |
size | number | Optional size of the emoji in pixels (default is 24). |
Example
Here’s a complete example of how to use LiveEmoji
:
import React from 'react';
import { LiveEmoji } from 'liveemoji';
const EmojiExample = () => {
return (
<div>
<h2>Here are some emojis:</h2>
<LiveEmoji icon="ConfusedFace" size={32} />
<LiveEmoji icon="ClownFace" size={32} />
<LiveEmoji icon="FaceWithPeekingEye" size={32} />
</div>
);
};
export default EmojiExample;