Emoji Reaction

Emoji Reaction is a Vue3 based emoji reaction component.

Demo

Here is a demo.

Before Everything

A Vue3 project

Installation

Install Emoji Reaction with npm:

npm install emoji-reaction

Usage/Examples

For version 1.x, we've got a built-in LeanCloud:

<template>
    <div class="card">
        <emoji-reaction
            react-to="whom-to-react-to"
            reactor="who-react"
            lc-app-id="leancloud-app-id"
            lc-app-key="leancloud-app-key"
            :emojis="['👍', '👎', '😄', '🎉', '😕', '❤️', '🚀', '👀']"
        />
    </div>
</template>
<script lang="ts" setup>
import { EmojiReaction } from 'emoji-reaction';
</script>

But due to some easy-to-use reasons, for 2.x, LeanCloud is not built-in any more. Giving three appointed function props is needed:

<template>
    <div class="card">
        <EmojiReaction
            :reactor="whom-to-react-to"
            :react="(reaction)=>{
                // request to react
            }"
            :unreact="(reaction)=>{
                // request to cancel
            }"
            :getReactions="()=>{
                // request reactions to a certain key
                return []
            }"
        />
    </div>
</template>
<script lang="ts" setup>
import { EmojiReaction } from 'emoji-reaction';
</script>

* emojis by default are ['👍', '👎', '😄', '🎉', '😕', '❤️', '🚀', '👀']

Related definitions:

export interface Reaction {
  reaction: string;
  reactors: string[];
}

export interface Props {
  emojis?: string[];
  reactor: string;
  dark?: boolean;
  react: (reaction: string)=>Promise<unknown>;
  unreact: (reaction: string)=>Promise<unknown>;
  getReactions: ()=>Promise<Reaction[]>;
}

For details, check this out (Take LeanCloud as an example).

What's more, we can register EmojiReaction globally:

import { createApp } from 'vue';
import App from './App.vue';
import EmojiReaction from 'emoji-reaction';

createApp(App).use(EmojiReaction).mount('#app');

And a cdn-way is also supported:

<script src="https://cdn.jsdelivr.net/npm/emoji-reaction@latest/lib/index.min.js"></script>

Customization

:root {
  --er-primary: #c4b5fd;
  --er-primary-light: #ddd6fe;
  --er-primary-dark: #a78bfa;
}