npm package: @souhaildev/reactemojis
Description: Transform static content into dynamic experiences with our animated SVG emojis. Engage your audience and inject personality into your landing page effortlessly.
Author: Souhail Benlhachemi
Latest version: 1.0.5

<div align="center">
  <br/>
  <img src="https://i.imgur.com/B2dHz6H.png" width="800" />
  <br/>
  <br/>
  <h5>
    Elevate Your React Landing Page with Animated Emojis.
  </h5>
  Read the <a href="https://docs.reactemojis.com/">documentation</a>
  <br/>
  <br/>
  <p>   
    <a href="https://badge.fury.io/js/@souhaildev%2Freactemojis">
      <img src="https://badge.fury.io/js/@souhaildev%2Freactemojis.svg"/>
    </a>
    <a href="https://reactemojis.com">
      <img src="https://img.shields.io/badge/live-demo-example"/>
    </a>
    <a href="https://github.com/benlhachemi/reactemojis/issues">
      <img src="https://img.shields.io/github/issues/benlhachemi/reactemojis"/>
    </a>
    <a href="ttps://github.com/wisehackermonkey/benlhachemi/reactemojis">
      <img src="https://img.shields.io/github/stars/benlhachemi/reactemojis"/>
    </a>
    <a href="https://github.com/benlhachemi/reactemojis/blob/master/LICENSE">
      <img src="https://img.shields.io/github/license/benlhachemi/reactemojis"/>
    </a>
    
  </p>
  <p>
    <em>♥️ Subscribe to my <a href="https://www.youtube.com/@souhail_benlhachemi">Youtube Channel</a> for more free & open source projects ♥️</em>
  </p>
</div>

# Getting Started

Welcome to **React Emojis!** This guide will help you get started with the installation process and provide a step-by-step walkthrough on how to use **React Emojis** in your React projects.


## Demo

<center><img src="https://i.imgur.com/2EI3A7u.png" width=500/></center>
<img src="https://i.imgur.com/C6hkVwt.png"/>


## Installation

### 📦 Install the package

```shell
npm i @souhaildev/reactemojis
```

### 🎉 Ready to Use

With the installation and setup completed, you are now ready to use the React Emojis package. Simply import the package into your React project:

```tsx
import ReactEmojis from "@souhaildev/reactemojis";
```

## How to use

Add expressive emojis to your project effortlessly. Use the following code to include an emoji in your React component:

```tsx
<ReactEmojis emoji='😍' />
```

### Props Table

| Prop                 | Required | Type                                                                                                       | Description                                                                                                                                                                          |
| -------------------- | -------- | ---------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **emoji**      | Required | [emoji]([https://docs.reactemojis.com/docs/list-of-emojis](https://docs.reactemojis.com/docs/list-of-emojis)) | Paste the emoji you want to use.[Click here]([https://docs.reactemojis.com/docs/list-of-emojis](https://docs.reactemojis.com/docs/list-of-emojis)) to see the list of supported emojis. |
| **emojiStyle** | Optional | string                                                                                                     | Choose from values 1, 2, 3 to determine the style of emoji variation.                                                                                                                |
| **style**      | Optional | JSON                                                                                                       | Add CSS styles.                                                                                                                                                                      |
| **className**  | Optional | string                                                                                                     | Add a classname for further customization.                                                                                                                                           |

<br />

For TypeScript support and a handy list of emojis, simply invoke IntelliSense completion in Visual Studio Code by pressing CTRL + Space. This will provide you with a convenient list of available emojis to choose from.
![Example banner](https://i.imgur.com/BmoEZZj.png)

:::

For additional details and advanced features, refer to our comprehensive documentation. Happy coding! 🚀

---

<p>
    <em>♥️ Subscribe to my <a href="https://www.youtube.com/@souhail_benlhachemi">Youtube Channel</a> for more free & open source projects ♥️</em>
  </p>

---

### [Official Package Website](https://reactemojis.com)

### [List of emojis](https://docs.reactemojis.com/docs/list-of-emojis)