Reaction Widget

A simple, pluggable reaction widget that can be easily added to any website.

Installation

From npm

npm install simple-reaction

From CDN

<script src="https://unpkg.com/simple-reaction@latest/dist/simple-reaction.umd.cjs"></script>

Usage

1. Add a container element to your HTML:

<div id="reaction-container"></div>

2. Initialize the widget:

As an ES Module

import ReactionWidget from 'simple-reaction';

ReactionWidget.init({
    container: '#reaction-container',
    apiUrl: 'http://localhost:8080',
    pageUrl: 'unique-page-identifier',
    reactions: [
        { id: 'like', icon: '👍' },
        { id: 'heart', icon: '❤️' }
    ]
});

Using the CDN script

<script>
    document.addEventListener('DOMContentLoaded', function() {
        ReactionWidget.init({
            container: '#reaction-container',
            apiUrl: 'http://localhost:8080',
            pageUrl: 'unique-page-identifier',
            reactions: [
                { id: 'like', icon: '👍' },
                { id: 'heart', icon: '❤️' }
            ]
        });
    });
</script>

Configuration Options

• container (string, required): CSS selector for the container element where the widget will be rendered.
• apiUrl (string, required): The base URL of your reaction API server.
• reactions (Array<{id: string, icon: string}>, required): A list of available reactions.
• styles (object, optional): An object to override default styles.
  • styles.button (object): CSS properties for the reaction button.
  • styles.buttonHover (object): CSS properties for the button in its :hover state.
  • styles.buttonActive (object): CSS properties for the button when active.
  • styles.icon (object): CSS properties for the icon element.
  • styles.count (object): CSS properties for the count text.

The pageUrl is determined automatically from the browser's URL.