Trayand / Vue3-EmojiReaction

`Emoji Reaction` is a Vue3 based emoji reaction inspired by https://www.npmjs.com/package/vue-feedback-reaction

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