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
}
Preview:
Download Details:
Author: IvanSotelo
Live Demo: https://ivansotelo.github.io/VueFeedbackReaction/
Download Link: https://github.com/IvanSotelo/VueFeedbackReaction/archive/master.zip
Official Website: https://github.com/IvanSotelo/VueFeedbackReaction
Install & Download:
# Yarn
$ yarn add vue-feedback-reaction
# NPM
$ npm install vue-feedback-reaction --save