CODEWITHSUNDEEP
reactjswebpack
Craig Wheeler
Craig Wheeler

Reputation: 146

How to render output from react-html-email using React and Webpack

I'm trying to use react-html-email to create email templates and the docs aren't clear on how to use renderEmail(emailComponent) can anyone point me in the right direction on how i'm supposed render the HTML output from this module using React and Webpack? The build process completes without errors but i dont see any HTML output and index.html is blank? Thanks!

Here is my Email component which renders the email template:

import React from 'react'
import {Email, Item, A} from 'react-html-email'

const BasicEmail = () => (

  <Email title='Basic Email'>
    <Item>
      <A href="#" style={{paddingLeft: 10}}>Hello World!</A>
    </Item>
  </Email>

);

export default BasicEmail;

Here is my Webpack config:

const path = require("path");
const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
    entry: ["./src/js/app.js"],
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "js/[name].js"
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            },
            {
                test: /\.html$/,
                use: [
                    {
                        loader: "html-loader"
                    }
                ]
            }
        ]
    },
    plugins: [
        new HtmlWebPackPlugin({
            template: "./src/index.html",
            filename: "./index.html"
        })
    ]
};

Upvotes: 1

Views: 3713

Answers (2)

Craig Wheeler
Craig Wheeler

Reputation: 146

I was able to fix the issue by adding renderEmail() inside of render() in app.js ... Running Webpack compiles the code to XHTML 1.0 Strict format then sends it to index.html

Here is my app.js file:

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import {renderEmail} from 'react-html-email';
import BasicEmail from './../components/basicEmail'

class App extends Component {
  constructor() {
    super();
    this.state = {
      value: ""
    };
  }

  render() {
    return (
      renderEmail(<BasicEmail />)
    );
  }
}

export default App;

ReactDOM.render(<App/>, document.getElementById("root"));

Upvotes: 1

Chaim Friedman
Chaim Friedman

Reputation: 6253

If you want to take the output of the renderEmail function and render it on screen in a react app, you would need to use dangerouslySetInnerHTML

Here is an example. <div dangerouslySetInnerHTML={{__html: emailHTML }} />;

Upvotes: 0

Related Questions