1.0.0 • Published 4 years ago

@testerimo/reactions v1.0.0

Weekly downloads
1
License
MIT
Repository
github
Last release
4 years ago

Reactions

Light-weight module for collecting reactions and feedback on a webpage

Installation

Install with npm

npm install @testerimo/reactions

or using Yarn

yarn add @testerimo/reactions

Usage

  1. Connect reaction.js to your page
  2. Create Reactions instance:
new Reactions({ id, parent, title, reactions, counters, onSelect });

where

nametypedescriptionrequired
idnumber or stringid of reactions instance (by default based on window.location.href)
parentstring or HTMLElementparent selector or element instancetrue
titlestringreactions title
reactionsarray[object]list of reaction with type name and icon fieldstrue
countersobjectmap of counterstrue
onSelectfunctioncallback function calls when reaction is selected

Example:

const options = {
    id: 'reaction-53384',
    parent: document.querySelector('article'),
    title: 'Rate the article',
    reactions: [
        { type: 'great', icon: '🚀' },
        { type: 'normal', icon: '🙂' },
        { type: 'bad', icon: '🤬' },
    ],

    counters: {
        'great': { count: 2394, selected: true },
        'normal': { count: 301 },
        'bad': 27,
    },

    onSelect: (data) => {
        console.log(data);  // { userId: '...' reactionId: '...', selected: '...' }
        db.updateReaction(data);
    }
};

new Reactions(options);

Identify user

To undetify user:

Reactions.setUserId(6671);

By default module uses id that is created by fingerprintjs2 package

Further plans

  • Add new types of reactions (i.e. Slack, Github emoji picker & counters)
  • Add methods to support live counters updating

Contributing

  1. Fork it!
  2. Create your feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -am 'Add some feature'
  4. Push to the branch: git push origin my-new-feature
  5. Submit a pull request :)