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