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.
To install emoji-motion
, you can use npm or yarn:
With npm:
npm install emoji-motion
# or
yarn add emoji-motion
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.
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 }} />;
}
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 }} />
);
}
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 }} />
);
}
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 adjustingheight
andwidth
to scale the emoji size.
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!