courier-js

2.0.8 • Public • Published

courier

Create email components with React / react-html-email and send them to Mailchimp on the server.

Installation

Download node at nodejs.org and install it, if you haven't already.

npm install courier-js --save

Render Usage

Render and return an HTML string from your email component.

import courier from 'courier';
import React from 'react';
import { Email, Item, Span } from 'react-html-email';
 
const template = () => (
    <Email title='My Sexy Email'>
        <Item data-mc-edit="article_title">
            <Span>Oh my, emails are sexy now.</Span>
        </Item>
    </Email>
);
 
const allTemplates = {
    myTemplate: {
        template,
        fileName: 'myTemplate'
    }
};
 
const { render, templateNames } = courier({ allTemplates });
const templateProps = {};
templateNames(); // returns a string of your template names
render('myTemplate', templateProps); // returns an HTML string with your props and `mc:edit` attribute

Compile to HTML file

Compile your email component to an HTML file and the directory of your choice.

import courier from 'courier';
import React from 'react';
import { Email, Item, Span } from 'react-html-email';
const action = process.argv[2];
 
const template = () => (
    <Email title='My Sexy Email'>
        <Item data-mc-edit="article_title">
            <Span>Oh my, emails are sexy now.</Span>
        </Item>
    </Email>
);
 
const allTemplates = {
    myTemplate: {
        template,
        fileName: 'myTemplate'
    }
};
 
const { compile } = courier({ allTemplates });
const templateProps = {};
 
const templateProps = {};
const dir = __dirname;
compile('myTemplate', templateProps, dir); // renders your template inside `dir` with your `fileName`.html

Render to Mailchimp Campaign

Update a Mailchimp template and send a campaign based on your email component.

import courier from 'courier';
import React from 'react';
import { Email, Item, Span } from 'react-html-email';
const action = process.argv[2];
 
const template = () => (
    <Email title='My Sexy Email'>
        <Item data-mc-edit="article_title">
            <Span>Oh my, emails are sexy now.</Span>
        </Item>
    </Email>
);
 
const allTemplates = {
    myTemplate: {
        template,
        fileName: 'myTemplate'
    }
};
 
const { mailchimp, render } = courier({ allTemplates });
const templateProps = {};
const mailchimpConfig = {
  key: config.key,
  datacenter: config.datacenter
};
const mailchimpOpts = {
  campaign: {
    type: 'regular',
    recipients: {
      list_id: 0
    },
    settings: {
      subject_line: 'Send via Courier',
      from_name: 'Sample',
      reply_to: 'sample@someemail.com',
      title: 'My Sexy Courier Campaign'
    }
  },
  templateId: 0,
  templateData: {
    name: 'My Template Name',
    html: render('myTemplate', templateProps)
  }
};
 
/*
    Also available from `mailchimp`:
    updateTemplate,
    createCampaign,
    updateCampaignContent,
    sendCampaignAction
*/
const { init } = mailchimp(mailchimpConfig, mailchimpOpts);
 
 
/*
    Updates `templateId` with your rendered component
    Creates new campaign
    Updates campaign content with your `templateId`
    Sends campaign to your list
*/
init()
    .then((data) => console.log(data));
    .catch((error) => console.log(error));

Tests

npm install
npm test

Dependencies

  • assert: commonjs assert - node.js api compatible
  • html: HTML pretty printer CLI utility (based on jsbeautifier)
  • mailchimp-lite: A lightweight wrapper for Mailchimp's v2 and v3 apis
  • mailchimpify: transform your data attributes to Mailchimp's custom mc:edit
  • react: React is a JavaScript library for building user interfaces.
  • react-dom: React package for working with the DOM.
  • react-html-email: Create elegant HTML email templates using React.

Dev Dependencies

  • babel-core: Babel compiler core.
  • babel-preset-es2015: Babel preset for all es2015 plugins.
  • babel-preset-react: Babel preset for all React plugins.
  • semistandard: All the goodness of feross/standard with semicolons sprinkled on top.
  • snazzy: Format JavaScript Standard Style as Stylish (i.e. snazzy) output
  • tape: tap-producing test harness for node and browsers

License

MIT

Generated by package-json-to-readme

Readme

Keywords

none

Package Sidebar

Install

npm i courier-js

Weekly Downloads

1

Version

2.0.8

License

MIT

Last publish

Collaborators

  • ryanscottaudio
  • roilan