Feedback Emoji Reactions In Vue - VueFeedbackReaction

Install & Download:

# Yarn
$ yarn add vue-feedback-reaction
# NPM
$ npm install vue-feedback-reaction --save

Description:

This is a Vue.js component that allows the user to react to your post/article/product/service with a set of animated emoticons.

How to use it:

1. Install and import the VueFeedbackReaction component.

import { VueFeedbackReaction } from 'vue-feedback-reaction';

export default {
  name: 'demo',
  components: {
    VueFeedbackReaction
  },
  data: () => ({
    feedback: ''
  })
};

2. Insert the component in your app template.

<template>
  <div class="app">
    <vue-feedback-reaction v-model="feedback" />
  </div>
</template>

3. Possible props.

value: {
  default: '',
  type: [String, Number]
},
labels: {
  default: () => [],
  type: Array,
  validator: v => v && v.length ? v.length === 5 : false
},
labelClass: {
  default: '',
  type: [Object, Array, String]
},
emojiWidth: {
  default: '',
  type: [String, Number]
},
emojiHeight: {
  default: '',
  type: [String, Number]
},
containerWidth: {
  default: '',
  type: [String, Number]
},
containerHeight: {
  default: '',
  type: [String, Number]
}

4. It also provides a component to use a single emoji.

import { VueReactionEmoji } from 'vue-feedback-reaction';

export default {
  name: 'demo',
  components: {
    VueReactionEmoji
  },
  data: () => ({
    reaction: 'natural',
    isActive: false,
    isDisabled: false
  })
};

<template>
  <div class="app">
    <vue-reaction-emoji :reaction="reaction" :is-active="isActive" :is-disabled="isDisabled" />
  </div>
</template>

5. Possible props for the VueReactionEmoji component.

reaction: {
  type: String,
  default: 'natural',
  validator: (v) => (['hate', 'disappointed', 'natural', 'good', 'excellent'].includes(v))
},
isActive: {
  type: Boolean
}