strapi-plugin-reactions
Advanced tools
All-in-One reactions plugin for any Content Type. Simple & flexible
A plugin for Strapi Headless CMS that provides flexible & configurable reactions experience to any Content Types.
Before releasing the RC and first Public Release we would like to introduce:
Request a feature by raising an issue.
Because of Emoji usage, you will need (or maybe you already did it because of earlier requirements) to extend the database connection section in your Strapi project configuration.
// config/database.ts
// config/<env>/database.ts
connection: {
charset: 'utf8mb4',
collation: 'utf8mb4_unicode_ci',
// your database credentials
}
Based on this specific charset, your emoji reactions are going to be saved in the database like a charm. See the reference issue raised on Strapi repository.
(Use yarn to install this plugin within your Strapi project (recommended). Install yarn with these docs.)
yarn add strapi-plugin-reactions@latest
After successful installation you've to re-build your Strapi instance. To archive that simply use:
yarn build
yarn develop
or just run Strapi in the development mode with --watch-admin option:
yarn develop --watch-admin
The Reactions plugin should appear in the Settings section of Strapi after you run app again.
As a next step you must configure your the plugin by adding types of reactions you want to use. See Configuration section.
All done. Enjoy 🎉
Clone repository
git clone git@github.com:VirtusLab-Open-Source/strapi-plugin-reactions.git
Create a soft link in your strapi project to plugin dist folder
ln -s <your path>/strapi-plugin-reactions/dist <your path>/strapi-project/src/plugins/reactions
Run develop or build command
// Watch for file changes
yarn develop
// or run build without nodemon
yarn build:dev
Complete installation requirements are exact same as for Strapi itself and can be found in the documentation under Installation Requirements.
Minimum environment requirements
>=14.19.1 <=18.x.x>=7.x.xIn our minimum support we're following official Node.js releases timelines.
Supported Strapi versions:
We recommend always using the latest version of Strapi to start your new projects.
To start your journey with Reactions plugin you must first setup types of reactions using the dedicated Settings page.
There is no need to provide any specific changed in the plugin configuration files extept enabling it.
module.exports = ({ env }) => ({
//...
reactions: {
enabled: true,
},
//...
});
Plugin provides granular permissions based on Strapi RBAC functionality.
For any role different than Super Admin, to access the Reactions settings you must set following permissions:
{
"id": 1,
"name": "Like",
"slug": "like",
"emoji": "👍",
"emojiFallbackUrl": "https://cdn.jsdelivr.net/npm/emoji-datasource-apple/img/apple/64/1f44d.png",
"createdAt": "2023-09-14T20:13:01.649Z",
"updatedAt": "2023-09-14T20:13:01.670Z",
"icon": null
}
{
"id": 1,
"kind": { // Type of reaction, not provided when listing by exact kind
"id": 1,
"slug": "like",
"name": "Like"
},
"user": { // User who trigger reaction, not provided when listing by exact user
"id": 1,
"username": "Joe Doe",
"email": "jdoe@sample.com",
},
"createdAt": "2023-09-14T20:13:01.649Z",
"updatedAt": "2023-09-14T20:13:01.670Z",
}
GET <host>/api/reactions/kinds
Return a list of available reaction kinds to use on the end user interface and expose for interaction with users.
Example URL: https://localhost:1337/api/reactions/kinds
Example response body
[
{
"id": 1,
"name": "Like",
"slug": "like",
"emoji": "👍",
"emojiFallbackUrl": "https://cdn.jsdelivr.net/npm/emoji-datasource-apple/img/apple/64/1f44d.png",
"createdAt": "2023-09-14T20:13:01.649Z",
"updatedAt": "2023-09-14T20:13:01.670Z",
"icon": null
},
// ...
]
GET <host>/api/reactions/list/<collection type UID>/<id>
Return all reactions assiciated with provided Collection / Single Type UID and Content Type ID with following combinations:
Authorization headerAuthorization headerExample URL: https://localhost:1337/api/reactions/list/api::blog-post.blog-post/1
Example response body
[
{
"id": 1,
"createdAt": "2023-09-14T20:13:01.649Z",
"updatedAt": "2023-09-14T20:13:01.670Z",
"kind":{
"id": 1,
"slug": "like",
"name": "Like"
},
"user":{ // Added if no user context provided to identify who made such reaction
"id": 1,
"username": "mziarko+1@virtuslab.com",
"email": "mziarko+1@virtuslab.com"
}
},
// ...
]
GET <host>/api/reactions/list/<type slug>/<collection type UID>/<id>
Return all reactions of specific kind / type assiciated with provided Collection / Single Type UID and Content Type ID with following combinations:
Authorization headerAuthorization headerExample URL: https://localhost:1337/api/reactions/list/like/api::blog-post.blog-post/1
Example response body
[
{
"id": 1,
"createdAt": "2023-09-14T20:13:01.649Z",
"updatedAt": "2023-09-14T20:13:01.670Z",
"user":{ // Added if no user context provided to identify who made such reaction
"id": 1,
"username": "mziarko+1@virtuslab.com",
"email": "mziarko+1@virtuslab.com"
}
},
// ...
]
GET <host>/api/reactions/set/<type slug>/<collection type UID>/<id>
Create reaction of specific kind / type assiciated with provided Collection / Single Type UID and Content Type ID.
Authorization header is required
Example URL: https://localhost:1337/api/reactions/set/like/api::blog-post.blog-post/1
Example response body
{
"id": 1,
"createdAt": "2023-09-14T20:13:01.649Z",
"updatedAt": "2023-09-14T20:13:01.670Z",
"relatedUid": "api::blog-post.blog-post:1"
}
GET <host>/api/reactions/unset/<type slug>/<collection type UID>/<id>
Delete reaction of specific kind / type assiciated with provided Collection / Single Type UID and Content Type ID.
Authorization header is required
Example URL: https://localhost:1337/api/reactions/unset/like/api::blog-post.blog-post/1
Example response body
true
GET <host>/api/reactions/toggle/<type slug>/<collection type UID>/<id>
Toggle reaction of specific kind / type assiciated with provided Collection / Single Type UID and Content Type ID.
Authorization header is required
Example URL: https://localhost:1337/api/reactions/set/like/api::blog-post.blog-post/1
Example response body
{
"id": 1,
"createdAt": "2023-09-14T20:13:01.649Z",
"updatedAt": "2023-09-14T20:13:01.670Z",
"relatedUid": "api::blog-post.blog-post:1"
}
// or
true
toggle reaction is settoogle no reaction is settoggle just specified reaction stays, rest becomes unsetYou can use this service method for example in your Strapi Content API findOne method to enrich the metadata of retrieved entity by associated reactions.
What is important, service method does not modify default data schema of Strapi Content API. All additions are made in the meta property in the form of:
// ...
"meta": {
// ...
"reactions": {
"<type slug>": [
// list of reactions
],
// ...
}
}
// src/api/blog-post/controllers/blog-post.js
'use strict';
/**
* blog-post controller
*/
const { createCoreController } = require('@strapi/strapi').factories;
module.exports = createCoreController('api::blog-post.blog-post', ({ strapi }) => ({
async findOne(ctx) {
const response = await super.findOne(ctx);
return strapi.plugin("reactions").services.enrich.enrichOne('api::blog-post.blog-post', response);
},
}));
{
"data":{
"id": 1,
"attributes":{
// Content type attributes
}
},
"meta":{
"reactions":{
"like":[{
"id": 1,
"createdAt": "2023-09-14T20:13:01.649Z",
"updatedAt": "2023-09-14T20:13:01.670Z",
"relatedUid": "api::blog-post.blog-post:2",
"kind":{
"id": 1,
"name": "Like",
"slug": "like",
"emoji": "👍",
"emojiFallbackUrl": "https://cdn.jsdelivr.net/npm/emoji-datasource-apple/img/apple/64/1f44d.png",
"icon": null
},
"user":{
"id": 1,
"username": "mziarko+1@virtuslab.com",
"email": "mziarko+1@virtuslab.com"
}
},
// ...
],
// ...
}
}
}
You can use this service method for example in your Strapi Content API find method to enrich the metadata of retrieved entities set by associated reactions.
What is important, service method does not modify default data schema of Strapi Content API. All additions are made in the meta property in the form of:
// ...
"meta": {
// ...
"reactions": {
"<content type id>": {
"<type slug>": [
// list of reactions
],
// ...
}
}
}
// src/api/blog-post/controllers/blog-post.js
'use strict';
/**
* blog-post controller
*/
const { createCoreController } = require('@strapi/strapi').factories;
module.exports = createCoreController('api::blog-post.blog-post', ({ strapi }) => ({
async find(ctx) {
const response = await super.find(ctx);
return strapi.plugin("reactions").services.enrich.enrichMany('api::blog-post.blog-post', response);
},
}));
{
"data": [{
"id": 1,
"attributes":{
// Content type attributes
}
}, {
"id": 2,
"attributes":{
// Content type attributes
}
}
],
"meta":{
"reactions":{
"1": {
"like":[{
"id": 1,
"createdAt": "2023-09-14T20:13:01.649Z",
"updatedAt": "2023-09-14T20:13:01.670Z",
"relatedUid": "api::blog-post.blog-post:2",
"kind":{
"id": 1,
"name": "Like",
"slug": "like",
"emoji": "👍",
"emojiFallbackUrl": "https://cdn.jsdelivr.net/npm/emoji-datasource-apple/img/apple/64/1f44d.png",
"icon": null
},
"user":{
"id": 1,
"username": "mziarko+1@virtuslab.com",
"email": "mziarko+1@virtuslab.com"
}
},
// ...
],
// ...
},
"2": {}
}
}
}
Feel free to fork and make a Pull Request to this plugin project. All the input is warmly welcome!
For general help using Strapi, please refer to the official Strapi documentation. For additional help, you can use one of these channels to ask a question:
[VirtusLab] prefix and DM.MIT License Copyright (c) VirtusLab Sp. z o.o. & Strapi Solutions.
FAQs
Strapi - Reactions plugin
The npm package strapi-plugin-reactions receives a total of 30 weekly downloads. As such, strapi-plugin-reactions popularity was classified as not popular.
We found that strapi-plugin-reactions demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
Socket researchers have discovered malicious npm packages targeting crypto developers, stealing credentials and wallet data using spyware delivered through typosquats of popular cryptographic libraries.
Security News
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.
Security News
A Stanford study reveals 9.5% of engineers contribute almost nothing, costing tech $90B annually, with remote work fueling the rise of "ghost engineers."