@trayand/emoji-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

Available Emoji

List :