react-contenteditable VS react-email-editor

Demo GitHub

There's a package for contentEditable: react-contenteditable

You need something like this https://github.com/unlayer/react-email-editor ?

import React from 'react'; export default class extends React.Component { constructor(props) { super(props); this.state = { feedback: '', name: 'Name', email: '[email protected]' }; this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); } render() { return ( Let's see if it works ) } handleChange(event) { this.setState({feedback: event.target.value}) } handleSubmit() { } }

Enter fullscreen mode Exit fullscreen mode

Now we need to add a handleSubmit() function to our component to call sendFeedback() function that will, as a result, trigger email sending via EmailJS. To keep it simple, we’ll use the default emailjs.send function.

handleSubmit (event) {
    const templateId = 'template_id';
    this.sendFeedback(templateId, {message_html: this.state.feedback, from_name: this.state.name, reply_to: this.state.email})
  }
  sendFeedback (templateId, variables) {
    window.emailjs.send(
    'gmail', templateId,
    variables
    ).then(res => {
        console.log('Email successfully sent!')
    })
    // Handle errors here however you like, or use a React error boundary
    .catch(err => console.error('Oh well, you failed. Here some thoughts on the error that occured:', err))
  }

Enter fullscreen mode Exit fullscreen mode

Replace the function parameters with your own and test if everything went smoothly in the EmailJS dashboard.

Don’t forget to import and use your Form component from the main component of your application which is located at src/App.js.

That’s all! Went pretty smoothly, huh?

Setting up an Express backend and connecting 3rd parties

If EmailJS won’t work for your use case, there’s an option to set up your own backend quickly and connect the 3rd party tool for email sending. As mentioned in the beginning of this article, ReactJS itself doesn’t have sending capabilities.

The set up is very easy. This guide takes you step by step through the steps required to quickly build an Express Node.js backend.

Once you have the backend, it’s time to connect a service specializing in sending emails. Follow this example to see how Mailjet can be implemented with your Express backend. Of course, many other tools such as SendGrid, Sendinblue or Mandrill can be implemented too thanks to their APIs. Please refer to their documentation for more details.

As you can see, this approach is fairly quick to set up and will do its job for basic things, such as most contact forms. Since emails sent this way land usually in your inboxes, you don’t care much about formatting and styles. If the email workflow you just added is meant for the user’s inbox (for example, a newsletter confirmation form), you probably want to beautify the message a little bit. Let’s talk about how to do it.

Building an HTML template in ReactJS

As you know, ReactJS projects are built using reusable components, pieces of UI that can be grouped with one another and placed around web pages with almost no effort. To no surprise, building an email template in React works in exactly the same fashion.

If you’ve ever tried to build and deliver emails with any framework, you know how painful it can be. What looks great on your testing environment, might render as a completely random set of styles and copy on users’ devices. Many browsers recognize </code> tags but others will omit them. Others work with inline styles but, again – not all of them. As a result, even if you test your emails inside out, possibly something is bound to go wrong.</p> <p>One tool that aims to prevent such troubles is <a href="https://mjml.io/">Mjml</a>. It’s a markup language that makes it easy to generate fully-responsive HTML templates. It comes with a large set of frequently used components that can be inserted in your mailings without coding them from scratch.</p> <p>Another really useful tool you can use is <a href="https://github.com/chromakode/react-html-email">React-html-email</a>. It’s used to quickly build reusable components of your choice. You insert your code sample, however long it is, and immediately get a single-line code component you can use throughout the project. See the example below:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>import React from 'react'; import { Email, Item, A} from 'react-html-email'; export default function InlineLink({name, children}) { return ( <Email title='link'> <Item> Hello {name} <A style={{ paddingLeft: 10 }} href='/blog/'>Click me!</A> </Item> <Item> {children} </Item> </Email> )}; </code></pre> <div class="highlight__panel js-actions-panel"> <div class="highlight__panel-action js-fullscreen-code-action"> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title> <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title> <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path> </svg> </div> </div> </div> <p>Add the code from above to a file in your client project to <code>src</code> directory and call it <code>Email.js</code>. Don’t forget to add <code>react-html-email</code> component to your project. Then import this component to <code>client/src/Form.js</code> and <code>renderEmail</code> from <code>react-html-email</code> to <code>client/src/Form.js</code>.<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>import MyEmail from './Email' import { renderEmail } from 'react-html-email' </code></pre> <div class="highlight__panel js-actions-panel"> <div class="highlight__panel-action js-fullscreen-code-action"> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title> <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title> <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path> </svg> </div> </div> </div> <p>After that you can use the following line to generate HTML code of your message:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>const messageHtml = renderEmail(<MyEmail name={this.state.name} />); // HTML code </code></pre> <div class="highlight__panel js-actions-panel"> <div class="highlight__panel-action js-fullscreen-code-action"> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title> <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title> <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path> </svg> </div> </div> </div> <p>React-html-email comes with an email validator that immediately checks and informs you if there were any errors in the component’s code.</p> <p>There’s also a really interesting WYSIWYG email editor for React with drag & drop features, aptly known as <a href="https://github.com/unlayer/react-email-editor">React Email Editor</a>. Check it out and see if it can accelerate your development.</p> <p>Finally, whether you use these tools or not, there’s a bunch of tips to take into consideration when trying to build a <a href="https://mailtrap.io/blog/best-email-frameworks/">responsive email</a> template. <a href="https://assertible.com/blog/creating-email-templates-with-react-components">This article</a> makes for a fairly compelling source.</p> <h2> <a name="sending-emails-with-nodemailer" href="#sending-emails-with-nodemailer"> </a> Sending emails with Nodemailer </h2> <p>Now, let’s assume we want to use Nodemailer to build a backend for our React email client. It’s perfectly doable and not so hard to set up.</p> <p>Nodemailer is a go-to module for anyone needing to send emails with Node.js framework. If you followed the example above, you should have already both Create-React-App and Express server set up. If you don’t, do it before we start as we’ll be using both.</p> <p>In this example, we’ll refer to a web form you could add to your website, for example, to let customers reach out quickly to your sales and support teams. Start off with building the UI of such form in ReactJS. Need some inspiration? Check out this <a href="https://react.rocks/tag/Form">list of 45 ready-to-implement React forms</a>.</p> <p>Now, <a href="https://reactjs.org/docs/handling-events.html">add the code to handle the form submissions</a>. There are tons of parameters that can be used with Nodemailer, review them <a href="https://nodemailer.com/message/">here</a> and add according to your needs. Here’s an example:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>handleSubmit(event){ const messageHtml = renderEmail( <MyEmail name={this.state.name}> {this.state.feedback}</MyEmail> ); axios({ method: "POST", url:"http://localhost:3000/send", data: { name: this.state.name, email: this.state.email, messageHtml: messageHtml } }).then((response)=>{ if (response.data.msg === 'success'){ alert("Email sent, awesome!"); this.resetForm() }else if(response.data.msg === 'fail'){ alert("Oops, something went wrong. Try again") } }) } </code></pre> <div class="highlight__panel js-actions-panel"> <div class="highlight__panel-action js-fullscreen-code-action"> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title> <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title> <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path> </svg> </div> </div> </div> <p>Add <code>axios</code> to your client application. In <code>express_react_example/client</code> run:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>npm install axios --save </code></pre> <div class="highlight__panel js-actions-panel"> <div class="highlight__panel-action js-fullscreen-code-action"> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title> <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title> <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path> </svg> </div> </div> </div> <p>And add the import to the </p> <p><code>express_react_example/client/Form.js:</code><br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>import axios from ‘axios’; </code></pre> <div class="highlight__panel js-actions-panel"> <div class="highlight__panel-action js-fullscreen-code-action"> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title> <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title> <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path> </svg> </div> </div> </div> <p>Make sure you reset the form once a message is submitted, in case a user wants to send another one.<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>resetForm(){ this.setState({feedback: ''}); } </code></pre> <div class="highlight__panel js-actions-panel"> <div class="highlight__panel-action js-fullscreen-code-action"> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title> <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title> <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path> </svg> </div> </div> </div> <p>Now, it’s about time we add <a href="https://mailtrap.io/blog/sending-emails-with-nodemailer/">Nodemailer</a> to our project (the backend part):<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>npm install nodemailer --save </code></pre> <div class="highlight__panel js-actions-panel"> <div class="highlight__panel-action js-fullscreen-code-action"> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title> <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title> <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path> </svg> </div> </div> </div> <p>and create a config file to store the credentials of an account we’re going to use. We’re adding it to the backend so there are no security concerns this time. Put this file next to your server source code and call it <code>config.js</code>.<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>module.exports = { USER: 'YOUR_EMAIL_ADDRESS', PASS: 'PASSWORD_FOR_EMAIL' } </code></pre> <div class="highlight__panel js-actions-panel"> <div class="highlight__panel-action js-fullscreen-code-action"> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title> <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title> <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path> </svg> </div> </div> </div> <p>Then, we’ll want to set up the transporter to deliver our messages. Nodemailer can be used with different types of transporters. We recommend the default one, referred to as <a href="https://nodemailer.com/smtp/">SMTP transporter</a>, due to the simplicity of installation and its reliability. If you’re not happy with it, you can also integrate <a href="https://nodemailer.com/transports/">other transporters</a> with your Nodemailer campaign. We’ll stick with the default one here.</p> <p>First of all, we need to share our credentials with the SMTP transporter. Add the following code to your server source code which should be called <code>server.js</code> if you followed the Express.js setup instructions:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>const nodemailer = require('nodemailer'); const creds = require('./config'); var transport = { host: 'your_host_here', // e.g. smtp.gmail.com auth: { user: creds.USER, pass: creds.PASS } } var transporter = nodemailer.createTransport(transport) transporter.verify((error, success) => { if (error) { console.log(error); } else { console.log('All works fine, congratz!'); } }); </code></pre> <div class="highlight__panel js-actions-panel"> <div class="highlight__panel-action js-fullscreen-code-action"> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title> <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title> <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path> </svg> </div> </div> </div> <p>Once done, we set up the post route to take our emails to its final destination – our inbox!<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>app.use(express.json()); app.post('/send', (req, res, next) => { const name = req.body.name const email = req.body.email const message = req.body.messageHtml var mail = { from: name, to: 'RECEIVING_EMAIL_ADDRESS_GOES_HERE', subject: 'Contact form request', html: message } transporter.sendMail(mail, (err, data) => { if (err) { res.json({ msg: 'fail' }) } else { res.json({ msg: 'success' }) } }) }) </code></pre> <div class="highlight__panel js-actions-panel"> <div class="highlight__panel-action js-fullscreen-code-action"> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title> <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title> <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path> </svg> </div> </div> </div> <p>Now run the backend by running the following command in the root of your application:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>node server.js </code></pre> <div class="highlight__panel js-actions-panel"> <div class="highlight__panel-action js-fullscreen-code-action"> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title> <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title> <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path> </svg> </div> </div> </div> <p>And run the frontend part too by running the command at the client directory:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>npm start </code></pre> <div class="highlight__panel js-actions-panel"> <div class="highlight__panel-action js-fullscreen-code-action"> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title> <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title> <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path> </svg> </div> </div> </div> <p>All done! You should receive an email, the form will reset and a user should see the confirmation you added in your React project.</p> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--HiwYCxix--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2p6n0rni1d64wns9bfz7.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--HiwYCxix--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2p6n0rni1d64wns9bfz7.png" alt="Image description" loading="lazy" width="512" height="143"></a></p> <hr> <p>Summary<br> We’ve tried to summarize various methods that can be used to send emails in ReactJS. Given <a href="https://railsware.com/blog/why-use-react/">how powerful and useful React is for nearly all kinds of projects</a>, you don’t want to get stuck on something as simple as form submission. By all means, try them all and see which fits best for your project. Best of luck!</p> <p>I hope you enjoyed our tutorial on <a href="https://mailtrap.io/blog/react-send-email/">how to send emails with attachments via ReactJS</a> that was originally published on Mailtrap Blog.</p>

Closest I found was https://github.com/unlayer/react-email-editor but this seems not to have been updated for react 18 and has very limited customisation.

Demo GitHub