emoji-motion

emoji-motion is a React component library that allows you to add animated emojis to your React applications with ease. It supports animations on hover and loop animations, making your emojis more dynamic and engaging.

Installation

To install emoji-motion, you can use npm or yarn:

With npm:

npm install emoji-motion
# or
yarn add emoji-motion

Usage

To use emoji-motion in your project, simply import the EmojiMotion component and use it in your React app. You can specify the emoji you want to animate using the emoji prop, and customize the size through the style prop.

Basic Usage

Here's how to add a static emoji:

import React from 'react';
import EmojiMotion from 'emoji-motion';

function App() {
  return <EmojiMotion emoji="😀" style={{ height: 250, width: 250 }} />;
}

Loop Animation

To make an emoji animate in a loop, use the variant="loop" prop:

import React from 'react';
import EmojiMotion from 'emoji-motion';

function App() {
  return (
    <EmojiMotion emoji="😀" variant="loop" style={{ height: 250, width: 250 }} />
  );
}

Hover Animation

To animate an emoji on hover, you can use the variant="hover" prop:

import React from 'react';
import EmojiMotion from 'emoji-motion';

function App() {
  return (
    <EmojiMotion emoji="😀" variant="hover" style={{ height: 250, width: 250 }} />
  );
}

Props

EmojiMotion accepts the following props for customization:

• emoji: string - The emoji character you wish to animate. This prop is required to display the emoji.
• variant: string - Specifies the type of animation. Available options:
  • loop for continuous looping animation.
  • hover for animation that triggers on mouse hover.
• style: object - CSS properties to apply to the emoji. Commonly used for adjusting height and width to scale the emoji size.

Contributing

Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

Thank you for considering contributing to emoji-motion. We hope you find this project useful and look forward to seeing your creative implementations!