More Premium Hugo Themes Premium React Themes

Mjml React

React component library to generate the HTML emails on the fly

Mjml React

React component library to generate the HTML emails on the fly

Author Avatar Theme by faire
Github Stars Github Stars: 408
Last Commit Last Commit: Jan 2, 2025 -
First Commit Created: Dec 18, 2023 -
default image

Overview:

Faire, a company that has extensively used the mjml-react package, has announced that they will be taking over maintaining the open-source project. This package has allowed them to easily create emails without requiring their developers to learn a new development environment. Faire plans to improve the package and introduce new features while ensuring compatibility with the previous version. The company expresses gratitude towards the Wix team for building and maintaining the project.

Features:

  • Typescript: The mjml-react package is now written in Typescript which helps ensure correct props are passed to mjml components.
  • Full mjml component support: The package uses an automated script to pull mjml components and create corresponding mjml-react components, providing support for all components available in the latest mjml version.
  • Other small changes: The package includes additional changes such as adding dangerouslySetInnerHTML for mjml ending tags, updating testing, and adding in-code documentation.

Installation:

To get started with the mjml-react package, follow the steps below:

  1. Choose between rendering in mjml or mjml-browser based on your rendering environment.
    • For node:
    // Uncomment mjml rendering
    // const { renderMJML } = require('faire/mjml-react/package/dist')
    // Comment mjml-browser rendering
    const { renderMJMLMJMLBrowser } = require('faire/mjml-react/package/dist')
    
    • For browser:
    // Uncomment mjml-browser rendering
    const { renderMJMLMJMLBrowser } = require('faire/mjml-react/package/dist')
    // Comment mjml rendering
    // const { renderMJML } = require('faire/mjml-react/package/dist')
    
  2. Wire up your render function according to your chosen rendering option.

Summary:

Faire, a company that has extensively used the mjml-react package, has taken over maintaining the open-source project. They have introduced a new version (V2) which includes support for all mjml components, TypeScript integration, and other improvements. Faire also has plans for future updates (V4) which will focus on improved prop type safety. The installation process involves choosing between rendering options (mjml or mjml-browser) based on the desired environment.