Add Microsoft’s Fluent Emojis To Your React Apps

Description:

Animated Fluent Emojis is a React component library that allows developers to integrate Microsoft’s Fluent emojis into their React apps with animation.

Features

• Easy Integration: A straightforward React component allows for quick and easy implementation.
• Customization Options: Control size, animation behavior, and other aspects to perfectly match your design.
• Flexible Animation Control: Supports both autoplay and hover-triggered animations, providing flexibility in how you engage users.
• Wide Selection: Enjoy a large collection of diverse emojis from Microsoft’s Fluent Emoji set.
• Lightweight Performance: Optimized for performance, ensuring your application remains fast and responsive.
• TypeScript Support: Full TypeScript support enhances the development experience with improved type safety and code maintainability.

Use Cases

• Interactive Chat Applications: Enrich real-time chat experiences with expressive animated emojis that react to messages or user interactions. Imagine a “thumbs up” emoji animating with enthusiasm when a user sends a positive message.
• Gamified User Interfaces: Use animated emojis as feedback indicators or rewards within web-based games or interactive learning platforms. Awarding a “star” emoji that spins and sparkles upon successful completion of a task.
• Accessibility Enhancements: Animated emojis can provide visual cues and feedback for users with specific accessibility needs, making interfaces more intuitive and engaging. For example, a shaking “warning” emoji to signify an error.
• Lively Dashboards and Data Visualizations: Incorporate animated emojis into dashboards to visually represent data changes or trends, making complex information more digestible. A growing “graph” emoji could indicate positive performance.

Installation

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

Usage

Import the Emoji component from animated-fluent-emojis in your React project file:

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

To display a basic animated emoji, add the component within your JSX as shown:

<Emoji id="smiling-face" />

Customization Props

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

• id: Unique identifier for the emoji.
• size: Size of the emoji in pixels (default is 100).
• playOnHover: Enables animation to play when hovered (default is false).
• animationIterations: Number of animation cycles, or infinite for continuous play.
• autoPlay: Automatically plays the animation when mounted (default is true).

Here’s a sample React component to help you get started:

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="rocket" animationIterations={3} />
    </div>
  );
}
export default App;