Template plugin for Notif.me SDK.
Features
-
All your notifications in one place — Define all your email
, sms
, push
, and webpush
templates in one folder :thumbsup:
-
Choose your template engine — facebook/react
, pug (formerly jade)
, mozilla/nunjucks
, handlebars.js
, mustache.js
, lodash
, underscore
, marko
, doT
, swig
, linkedin/dustjs
, twig.js
, ejs
... and many more. Literally the one you want :dancer:
-
Complete control — No magic: you define all the behaviours you need (layouts, CSS preprocessor...) :rocket:
-
No dependencies — Lightning fast installation :zap:
-
Localization — Easily implement i18n/l10n for all your notifications :globe_with_meridians:
-
CSS inlining — Add Juice to your dependencies and the CSS in your emails will automatically be inlined :ribbon:
-
MIT license — Use it like you want.
Getting Started
$ yarn add notifme-template
const nunjucks = require('nunjucks')
const getRenderer = require('notifme-template')
const render = getRenderer(nunjucks.renderString, './templates')
const data = {user: {firstname: 'John', email: 'john@example.com'}}
render('welcome', data, 'en-US').then((notification) => {
})
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" <david@example.com>',
user: {
firstname: 'John',
email: 'john@example.com',
phone: '+15000000001',
pushToken: 'xxxxx'
}
}
})
See a complete working example for more details.
How to use
Constructor options
const getRenderer = require('notifme-template')
const render = getRenderer()
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.
Template declaration
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
method
render().then((notification) => {
})
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.
Contributing
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 git@github.com:[YOUR_USERNAME]/notifme-template.git && cd notifme-template
$ yarn install
Need Help? Found a bug?
Submit 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.