Easy & Customizable Reactions Component For Vue 3

Install & Download:

# Yarn
$ yarn add @webzlodimir/vue-reactions
# NPM
$ npm i @webzlodimir/vue-reactions

Description:

A Vue 3 component adds Facebook-like reactions to your web applications, which enables users to express their feelings or opinions about your content by clicking on one of several predefined reactions.

How to use it:

1. Import the VueReactions component.

import VueReactions from '@webzlodimir/vue-reactions';
import '@webzlodimir/vue-reactions/dist/style.css';
import { ref } from "vue";

2. Define your reaction emojis as follows:

const reactions = ref([
  {
    id: 1,
    label: "Heart",
    emoji: "❤️",
  },
  {
    id: 2,
    label: "Cool",
    emoji: "👍",
  },
  {
    id: 3,
    label: "Bad",
    emoji: "👎",
  },
]);

3. Add the VueReactions component to the template and use browser storage to store the selection.

<template>
  <vue-reactions
      :model-value="selectedReactions"
      :reactions="reactions"
      :storage="storage"
      @update:modelValue="updateSelectedReactions"
      @update:storage="updateStorage"
  />
</template>

const storage = ref([]);
const selectedReactions = ref([]);
const updateStorage = (storageArray) => {
  storage.value = storageArray;
};
const updateSelectedReactions = (reactions) => {
  selectedReactions.value = reactions;
};

4. Available component props.

reactions: IReaction[];
modelValue: ISelectedReactionsItem[];
storage: (string | number)[];
multiple?: boolean;
hasDropdown?: boolean;

Preview: