@codexteam/reactions
TypeScript icon, indicating that this package has built-in type declarations

1.1.0 • Public • Published

Reactions

Light-weight module for gathering users' feedback on a webpage content Allows to build in element, containing buttons - emojis for expressing attitude to a content

Getting started

Installation

npm or Yarn

npm install @codexteam/reactions

or

yarn add @codexteam/reactions

Download from CDN

<script src="https://cdn.jsdelivr.net/npm/@codexteam/reactions"></script>

Usage

Simplified initialization

  1. Connect reactions.js script to your page
  2. Create an instance of Reactions using
new Reactions({parent: '', title: '', reactions: []});

where

name type description
parent string or HTMLElement element in which module should be inserted - selector or element instance
title string module title
reactions string[] array of emojis to be inserted in module options

Example

new Reactions({parent: 'body', title: 'What do you think?', reactions: ['👍', '👌', '👎']});

Initialize using reactions tag

  1. Add <reactions> to your page
  2. Provide <reactions> with data-id and data-title to set module id and title
  3. Fill <reactions> with <reaction> each containing emoji to be inserted in module options
  4. Connect reactions.js script to your page
  5. Run Reactions.init()

example:

<reactions data-id='' data-title='What do you think?'>
    <reaction>😁</reaction>
    <reaction>👍</reaction>
    <reaction>😞</reaction>
  </reactions>

Advanced settings

Identify user

Module uses userId property to identify user - by default userId is random number, but it can be specified through setUserId method

name type description
userId number user identifier

example:

  Reactions.setUserId(1);

Identify module

By default module takes page URL as module identifier, but it also can be specified manually by passing id to reactions constructor

use it for:

  • lists (different modules on one page)
  • binding module to a specific content item, regardless of URL

in this case instance should be created this way

new Reactions({parent: '', title: '', reactions: [], id: ''});

where

name type description
id string or number module identifier

Readme

Keywords

none

Package Sidebar

Install

npm i @codexteam/reactions

Weekly Downloads

2

Version

1.1.0

License

MIT

Unpacked Size

139 kB

Total Files

8

Last publish

Collaborators

  • slaveeks
  • dsnostr
  • codex-team
  • khaydarovm