Animated Fluent Emojis

Animated Fluent Emojis is a React component library that brings Microsoft's Fluent emojis to life in your web applications. This library offers an easy way to integrate expressive and engaging animated emojis, enhancing user experience and visual appeal in your React projects.

🎉 Exclusive Feature: Until now, these Animated Fluent Emojis were only available within Microsoft Teams. This library makes them accessible for use in any web application for the first time, bringing a unique and lively emoji experience to your projects!

• Features
• Tech Stack
• Installation
• Usage
• Props
• Examples
• Emoji Categories
• Contributing
• Support the Project
• License
• Acknowledgements

Features 🌟

• 🚀 Easy Integration: Simple React component for quick implementation in your projects.
• 🎨 Customizable: Adjust size, animation behavior, and more to fit your design needs.
• 🔄 Flexible Animation: Support for autoplay and hover-triggered animations.
• 🌈 Wide Variety: Access to a diverse set of emojis from Microsoft's Fluent Emoji collection.
• 📦 Lightweight: Optimized for performance to keep your applications fast and responsive.
• 🌐 TypeScript Support: Full TypeScript support for improved development experience.

Tech Stack 🧰

Installation 🔧

To install Animated Fluent Emojis in your project, run one of the following commands:

npm install animated-fluent-emojis
# or
pnpm add animated-fluent-emojis

Usage 📚

1. Import the Emoji component in your React file:

   import { Emoji } from 'animated-fluent-emojis';

2. Use the component in your JSX:

   <Emoji id="smiling-face" />

3. Customize the emoji with props:

   <Emoji id="party-popper" size={64} playOnHover animationIterations={3} />

Props

| Prop | Type | Default | Description | | ------------------- | -------------------- | ------- | ---------------------------------------------------- | | id | string | - | The unique identifier of the emoji | | size | number | 100 | The size of the emoji in pixels | | playOnHover | boolean | false | Whether to play the animation on hover | | animationIterations | number or 'infinite' | 2 | The number of times to play the animation on load | | autoPlay | boolean | true | Whether to automatically play the animation on mount |

Examples

Basic Usage

import React from 'react';
import { Emoji } from 'animated-fluent-emojis';

function App() {
	return (
		<div>
			<h1>Hello, Animated Emojis!</h1>
			<Emoji id="1f4af_hundredpointssymbol" />
			<Emoji id="1f92f_explodinghead" size={64} playOnHover />
			<Emoji id="launch" animationIterations={3} />
		</div>
	);
}

export default App;

Emoji Categories 📋

For a complete list of available emojis and their corresponding IDs, Unicode representations, descriptions, and keywords, please refer to our Emoji List. The emojis are organized into the following categories:

• Activities
• Animals
• Food
• Hand Gestures
• Objects
• People
• Smileys
• Symbols
• Travel and Places

Contributing

We welcome contributions to Animated Fluent Emojis! If you have suggestions for improvements or encounter any issues, please feel free to open an issue or submit a pull request.

Contribution guidelines are currently being developed. In the meantime, please feel free to open issues or submit pull requests following common open-source practices.

Support the Project

If you find Animated Fluent Emojis useful, please consider supporting the project:

Your support helps maintain and improve Animated Fluent Emojis!

License 📄

Animated Fluent Emojis is totally free for commercial and personal use, this software is licensed under the ISC License.

Acknowledgements

• Microsoft for their Fluent Emoji set
• Tarikul Islam Anik for the Animated Fluent Emojis project, which served as inspiration for this library