Template plugin for Notif.me SDK.
-
All your notifications in one place — Define all your
email,sms,push, andwebpushtemplates in one folder 👍 -
Choose your template engine —
facebook/react,mozilla/nunjucks,handlebars.js,mustache.js,lodash,underscore,marko,doT,swig,linkedin/dustjs,twig.js,ejs... and many more. Literally the one you want 💃 -
Complete control — No magic: you define all the behaviours you need (layouts, CSS preprocessor...) 🚀
-
No dependencies — Lightning fast installation ⚡
-
Localization — Easily implement i18n/l10n for all your notifications 🌐
-
CSS inlining — Add Juice to your dependencies and the CSS in your emails will automatically be inlined 🎀
-
MIT license — Use it like you want.
$ yarn add notifme-template// Example with nunjucks template engine ($ yarn add nunjucks)
const nunjucks = require('nunjucks')
const getRenderer = require('notifme-template')
const render = getRenderer(nunjucks.renderString, './templates')
const data = {user: {firstname: 'John', email: '[email protected]', ...}}
render('welcome', data, 'en-US').then((notification) => {
// Send the notification on its channels
})// ./templates/welcome.js
module.exports = () => ({
name: 'welcome',
title: 'Welcome {{user.firstname}}',
version: 1,
channels: {
sms: {
from: '{{smsFrom}}',
to: '{{user.phone}}',
text: "Hi {{user.firstname}}, we're very happy to welcome you on board!"
},
email: {
from: '{{emailFrom}}',
to: '{{user.email}}',
subject: 'Welcome {{user.firstname}}',
html: `{% extends "templates/_layouts/email-transactional.html" %}
{% block content %}
Hi {{user.firstname}},<br><br>
We're very happy to welcome you on board.<br><br>
See you soon!
{% endblock %}`
},
push: {
registrationToken: '{{user.pushToken}}',
title: 'Welcome {{user.firstname}}',
body: "Hi {{user.firstname}}, we're very happy to welcome you on board"
}
},
sampleData: {
smsFrom: 'Notifme',
emailFrom: '"David, Notif.me team" <[email protected]>',
user: {
firstname: 'John',
email: '[email protected]',
phone: '+15000000001',
pushToken: 'xxxxx'
}
}
})See a complete working example for more details.
const getRenderer = require('notifme-template')
const render = getRenderer(/* renderer, folder, options */)| Argument name | Type | Required | Description |
|---|---|---|---|
renderer |
Function |
true |
Template engine function to use. It must implement (templateName: string, data: Object) => string |
folder |
string |
true |
The path to the folder containing all your templates. |
options |
Object |
false |
See options definition. |
This returns the render function documented below.
project/
│
└───templates/ <= you can place this folder where you want and choose its name
│ template1.js
│
└───template2/
│ index.js
With the structure above, you will have two templates template1 and template2. notifme-template makes a dynamic require require(`${path.resolve(folder, templateName)}`) the first time you call them.
Each template must export a function implementing: (lang: string) => TemplateType | Promise<TemplateType>. See TemplateType definition and examples for more details.
render(/* templateName, data, lang */).then((notification) => {
// Send the notification on its channels
})| Argument name | Type | Required | Description |
|---|---|---|---|
templateName |
string |
true |
The template name to use. |
data |
Object |
true |
Data to use when rendering the notification. |
lang |
string |
false |
User language. |
This returns a Promise resolving with the rendered template.
Contributions are very welcome!
To get started: fork this repository to your own GitHub account and then clone it to your local device.
$ git clone [email protected]:[YOUR_USERNAME]/notifme-template.git && cd notifme-template
$ yarn installSubmit an issue to the project Github if you need any help. And, of course, feel free to submit pull requests with bug fixes or changes.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent