Emoji Reaction

Emoji Reaction is a Vue3 based emoji reaction inspired by VueFeedbackReaction

Installation

$ npm i @trayand/emoji-reaction

Note: This library can be used as plugin with Vue.use and can be import as component too.

Usage

Plugin

// main.js
import { createApp } from "vue";
import App from "./App.vue";
import EmojiReaction from "@trayand/emoji-reaction";

createApp(App).use(EmojiReaction).mount("#app");

Component

import { EmojiReaction } from "@trayand/emoji-reaction";

Note: you can use either Plugin or Component (no need to use both)

Implementation

<script setup>
import { computed, ref } from "vue";
import { EmojiReaction } from "@trayand/emoji-reaction";

const value = ref({ name: "neutral" });
</script>

<template>
  <EmojiReaction
    v-model="value"
    :label="true"
    :size="60"
    :grayscale="true"
    :emoji="[
      { name: 'mad', other_name: 'horrible' },
      { name: 'worried', other_name: 'don\'t like' },
      { name: 'neutral', other_name: 'normal' },
      { name: 'slight_smile', other_name: 'agree' },
      { name: 'smile', other_name: 'totally agree' },
    ]"
    :bindWithEmoji="false"
  />
  <p style="text-align: center">{{ value }}</p>
</template>

Props

| Prop | Type | Default | Description | | ------------- | -------------------- | -------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- | | value | Object | {name: "", other_name: ""} | Input value (v-model) | | emoji | Array<String,Object> | [ "mad", "worried", "neutral", "slight_smile", "smile"] | List of reaction emoji.Available emoji will be shown below.can be set to array of object with keys name and other_name. | | label | Boolean | false | Show emoji label (can be customized with other_name in emoji props) | | size | Number | 60 | Emoji Size (px) | | grayscale | Boolean | false | Set inactive emoji to grayscale | | bindWithEmoji | Boolean | false | the data binded will return the emoji in the object. |

Available Emoji

List :

| | | | | | ----------- | ------------ | ------------- | --------------- | | 😠 mad | 😟 worried | 😐 neutral | 🙂 slight_smile | | 😄 smile | 🤩 star_eyes | 😍 heart_eyes | 😢 cry | | 🥺 pleading | 😂 joy |