TypeScript Email

Open-source TypeScript projects categorized as Email
Edit details
Topics: #TypeScript #React #Privacy #JavaScript #Security
Appwrite - The Open Source Firebase alternative introduces iOS support
Appwrite is an open source backend server that helps you build native iOS applications much faster with realtime APIs for authentication, databases, files storage, cloud functions and much more!
appwrite.io
Sponsored

Top 23 TypeScript Email Projects

  • novu

    The open-source notification infrastructure with fully functional embedded notification center

    Project mention: Make a video about the best contributor of the month with React and NodeJS 🚀 | dev.to | 2023-03-20

    Just a quick background about us. Novu is the first open-source notification infrastructure. We basically help to manage all the product notifications. It can be In-App (the bell icon like you have in the Dev Community - Websockets), Emails, SMSs and so on.

  • Tutanota makes encryption easy

    Tutanota is an email service with a strong focus on security and privacy that lets you encrypt emails, contacts and calendar entries on all your devices.

    Project mention: Can't access my account | reddit.com/r/tutanota | 2023-03-18

    I tried checking my email today, but tutanota.com says my login credentials are invalid. I can't request a recovery code since I need the password to do so. I haven't changed my password in a few months, and it's saved in my browser, so I'm entering the right password.

  • Appwrite

    Appwrite - The Open Source Firebase alternative introduces iOS support . Appwrite is an open source backend server that helps you build native iOS applications much faster with realtime APIs for authentication, databases, files storage, cloud functions and much more!

  • react-email-editor

    Drag-n-Drop Email Editor Component for React.js

    Project mention: Sending Emails with ReactJS | dev.to | 2022-09-20

    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.

    Image description

    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 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.

    One tool that aims to prevent such troubles is Mjml. 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.

    Another really useful tool you can use is React-html-email. 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:

    import React from 'react';
import { Email, Item, A} from 'react-html-email';
export default function InlineLink({name, children}) {
  return (
  
    
       Hello {name}
       Click me!
    
    
      {children}
    
  
)};
    Enter fullscreen mode Exit fullscreen mode

    Add the code from above to a file in your client project to src directory and call it Email.js. Don’t forget to add react-html-email component to your project. Then import this component to client/src/Form.js and renderEmail from react-html-email to client/src/Form.js.

    import MyEmail from './Email'
import { renderEmail } from 'react-html-email'
    Enter fullscreen mode Exit fullscreen mode

    After that you can use the following line to generate HTML code of your message:

    const messageHtml =  renderEmail(); // HTML code
    Enter fullscreen mode Exit fullscreen mode

    React-html-email comes with an email validator that immediately checks and informs you if there were any errors in the component’s code.

    There’s also a really interesting WYSIWYG email editor for React with drag & drop features, aptly known as React Email Editor. Check it out and see if it can accelerate your development.

    Finally, whether you use these tools or not, there’s a bunch of tips to take into consideration when trying to build a responsive email template. This article makes for a fairly compelling source.

    Sending emails with Nodemailer

    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.

    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.

    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 list of 45 ready-to-implement React forms.

    Now, add the code to handle the form submissions. There are tons of parameters that can be used with Nodemailer, review them here and add according to your needs. Here’s an example:

    handleSubmit(event){
const messageHtml =  renderEmail(
   {this.state.feedback}
);
        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")
            }
        })
    }
    Enter fullscreen mode Exit fullscreen mode

    Add axios to your client application. In express_react_example/client run:

    npm install axios --save
    Enter fullscreen mode Exit fullscreen mode

    And add the import to the

    express_react_example/client/Form.js:

    import axios from ‘axios’;
    Enter fullscreen mode Exit fullscreen mode

    Make sure you reset the form once a message is submitted, in case a user wants to send another one.

    resetForm(){
        this.setState({feedback: ''});
    }
    Enter fullscreen mode Exit fullscreen mode

    Now, it’s about time we add Nodemailer to our project (the backend part):

    npm install nodemailer --save
    Enter fullscreen mode Exit fullscreen mode

    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 config.js.

    module.exports = {
    USER: 'YOUR_EMAIL_ADDRESS',
    PASS: 'PASSWORD_FOR_EMAIL'
}
    Enter fullscreen mode Exit fullscreen mode

    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 SMTP transporter, due to the simplicity of installation and its reliability. If you’re not happy with it, you can also integrate other transporters with your Nodemailer campaign. We’ll stick with the default one here.

    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 server.js if you followed the Express.js setup instructions:

    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!');
  }
});
    Enter fullscreen mode Exit fullscreen mode

    Once done, we set up the post route to take our emails to its final destination – our inbox!

    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'
      })
    }
  })
})
    Enter fullscreen mode Exit fullscreen mode

    Now run the backend by running the following command in the root of your application:

    node server.js
    Enter fullscreen mode Exit fullscreen mode

    And run the frontend part too by running the command at the client directory:

    npm start
    Enter fullscreen mode Exit fullscreen mode

    All done! You should receive an email, the form will reset and a user should see the confirmation you added in your React project.

    Image description

    Summary
    We’ve tried to summarize various methods that can be used to send emails in ReactJS. Given how powerful and useful React is for nearly all kinds of projects, 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!

    I hope you enjoyed our tutorial on how to send emails with attachments via ReactJS that was originally published on Mailtrap Blog.

  • ProtonMail Web Client

    Monorepo hosting the proton web clients

    Project mention: Announcement: SMTP Server in Rust with DMARC, DANE, MTA-STS, Sieve, OTEL support | reddit.com/r/selfhosted | 2023-03-02

    PS: I hope that we selfhosters will have a modern, efficient, easy to use mail suite one day with modern features like JMAP, good self-learning spam integration, automated checks and validations for SPF/DMARC/DKIM or whether the IP/host suddenly appears in a blocklist and integrated encryption at rest for emails. Something that isn't 30 services in a container image, with 30 different configuration styles. Maybe even with an API integrated that's compatible to the ProtonMail frontend (like the neutron server once intended to be). Anyway, I'm sorry for dreaming. ;)

  • gmail-desktop

    :postbox: Nifty Gmail desktop app for macOS, Linux & Windows

    Project mention: Email client: Mail (from Apple) vs Mimestream? | reddit.com/r/macapps | 2022-10-20

    Check this https://github.com/timche/gmail-desktop

  • maildog

    🐶 Hosting your own email forwarding service on AWS and managing it with Github Actions

  • jsx-mail

    Building the future of email with JSX syntax 📜

    Project mention: Acabou de chegar o novo #jsxmail! Use o poder do React para criar templates de e-mail incríveis! | reddit.com/r/u_Theryston | 2022-12-09

  • Sonar

    Write Clean JavaScript Code. Always.. Sonar helps you commit clean code every time. With over 300 unique rules to find JavaScript bugs, code smells & vulnerabilities, Sonar finds the issues while you focus on the work.

  • Ptorx

    📩🛡 Email privacy. Anonymously send and receive with alias forwarding.

    Project mention: Ptorx: Send and receive mail without using your real email address | news.ycombinator.com | 2022-10-22

  • feathers-authentication-management

    Adds sign up verification, forgotten password reset, and other capabilities to local feathers-authentication

  • mailjet-apiv3-nodejs

    [API v3] Official Mailjet API v3 NodeJS wrapper

  • cli

    Get a programmable email address. Automate what happens when you receive emails. It's like Zapier for devs who hate emails. (by mailscript)

  • runbox7

    Runbox 7 web app

    Project mention: Ask HN: What email client do you prefer? | news.ycombinator.com | 2022-05-02

    I've only ever worked at places with self hosted Exchange for e-mail and groupware. As a client, I use Outlook Web Access (OWA) most of the time and I think it's fine. It's simple, feels reasonably snappy to me and I like having the same interface on all the different machines I need to login from. Sometimes, I need to reach for the desktop version of Outlook in a Windows VM to access options or features not accessible in OWA (or in the sluggish abomination that is Outlook for Mac). However, in the end I don't care all that much about my e-mail client because I use a simple inbox-zero-ish approach to e-mail and only really need Inbox and Archive folders (as well as a delete function). This works with every client.

    To have an offline archive, I also have Apple Mail connected to my Exchange accounts. I never use the app itself but frequently use Spotlight to search for and preview e-mails. However, if I'm already working in OWA, I use the search function in there. In my experience, it works well and doesn't feel significantly slower than searching locally in my offline archive.

    [Sidenote: I find it annoying to have to use Spotlight for local e-mail search instead of Alfred.app (which has been my universal search app for many years). Alas, Apple only allows access to the e-mail folder on MacOS for their own apps for some annoying reason these days.]

    Outside of work, I have the same setup with Apple Mail and Spotlight for archival and search. As clients, I use K-9 on Android and Apple Mail or runbox7 on the desktop. The latter is the webmail app of Runbox, my e-mail provider of choice (I think the app is pretty good - and open source on https://github.com/runbox/runbox7 ).

  • pinbox

    Self-hosted webmail client greatly inspired by Google Inbox (by msp301)

    Project mention: Semi-open Email Archive/Server | reddit.com/r/selfhosted | 2022-08-26

    An alternative way might be checking out https://github.com/msp301/pinbox which I consider testing out myself, although my problem is kinda 1/30th of yours. Uses notmuchmail as indexer

  • mailersend-nodejs

    The official MailerSend Node.js SDK

    Project mention: Sending emails | reddit.com/r/Nuxt | 2022-12-12

    Can I use this library in Nuxt3+Typescrit? mailersend/mailersend-nodejs: The official MailerSend Node.js SDK (github.com)

  • email-comparison

    📬 A quick comparison of private and / or secure email providers

    Project mention: Bad business | reddit.com/r/tutanota | 2022-06-05

    Here's some alternatives to consider, good luck

  • icloud-hide-my-email-browser-extension

    Enjoy iCloud's Hide My Email service in your favourite browser

    Project mention: Apple's Hide My Email service is now available on Chromium based browsers | reddit.com/r/programming | 2022-10-19

    Source code: https://chrome.google.com/webstore/detail/icloud-hide-my-email/omiaekblhgfopjkjnenhahfgcgnbohlk

  • email-spell-checker

    📮 An ultratiny (1.9 KB) and fast JavaScript email checker to reduce users typing a wrong email. Written in TypeScript. Enterprise-grade.

    Project mention: Email Validation Logic is Wrong (2021) | news.ycombinator.com | 2023-01-10

    Not an "instead of" approach, but the best thing I'd implemented when running an ecom site was a typo detector that prompted people to fix their email if it looked wrong, like "[email protected]", "Did you mean [email protected]?".

    At the time I used "mailcheck": https://github.com/mailcheck/mailcheck

    There appears to be a more modern implementation here: https://github.com/ZooTools/email-spell-checker

    It reduced the amount of badly entered emails more than any other approach I tried.

  • Ymail

    YmailBot - Temporary Email Service in your smartphone. 📬

    Project mention: YMail - Free Temporary Email in your smartphone 💌 | reddit.com/r/TelegramBots | 2023-03-01

  • email-validator-js

    Verify email address checking MX records, and SMTP connection, check for disposable email addresses and free email providers.

  • juno-core

    Open Source React Email Application connected to Gmail that is fast and easy to use via web.

    Project mention: Google API - Refresh token | reddit.com/r/reactjs | 2022-10-04

    This is work for an open source project , https://github.com/Elysium-Labs-EU/juno-core - your help will be greatly appreciated.

  • onesignal-supabase-sample-integration-supabase

    Sample integration to send a push notification using OneSignal from a Supabase edge function.

    Project mention: Supabase introduces MFA Support | news.ycombinator.com | 2022-12-14

    https://github.com/OneSignalDevelopers/onesignal-supabase-sa...

  • rss-to-email

    Scheduled RSS to Email with Github Actions

    Project mention: Self-hosted RSS to email service with GitHub Actions | reddit.com/r/coolgithubprojects | 2023-01-25

  • unsub

    Take back control of your email.

  • InfluxDB

    Access the most powerful time series database as a service. Ingest, store, & analyze all types of time series data in a fully-managed, purpose-built database. Keep data forever with low-cost storage and superior data compression.

NOTE: The open source projects on this list are ordered by number of github stars. The number of mentions indicates repo mentiontions in the last 12 Months or since we started tracking (Dec 2020). The latest post mention was on 2023-03-20.

TypeScript Email related posts

Index

What are some of the best open-source Email projects in TypeScript? This list will help you:

Project Stars
1 novu 19,491
2 Tutanota makes encryption easy 5,191
3 react-email-editor 3,763
4 ProtonMail Web Client 3,633
5 gmail-desktop 666
6 maildog 391
7 jsx-mail 346
8 Ptorx 319
9 feathers-authentication-management 242
10 mailjet-apiv3-nodejs 208
11 cli 129
12 runbox7 120
13 pinbox 67
14 mailersend-nodejs 57
15 email-comparison 55
16 icloud-hide-my-email-browser-extension 53
17 email-spell-checker 46
18 Ymail 34
19 email-validator-js 28
20 juno-core 18
21 onesignal-supabase-sample-integration-supabase 12
22 rss-to-email 12
23 unsub 6

Sponsored
Access the most powerful time series database as a service
Ingest, store, & analyze all types of time series data in a fully-managed, purpose-built database. Keep data forever with low-cost storage and superior data compression.
www.influxdata.com