@beforeyoubid/jsx-mail
Advanced tools
jsx-mail is an email framework that uses React to create email templates. Using JSX syntax makes it extremely easy to code your template, allowing you to create highly customized emails and reducing code maintenance work. Also, the main purpose of jsx-mail is to make your email templates compatible with all email clients.
JSX works with 2 different sides. The first side is what we call "jsx-side" this is the part where you should define the jsx/tsx content for your email template. The second side is called the "js-side" this is the side of your api (or whoever needs the HTML of the email).
// jsx-side
export function Welcome({ name }) {
return <h1>{name} Welcome to jsx-mail</h1>;
}
export default function App() {
return {
Welcome: {
componentFunction: Welcome,
props: {
name: 'string',
},
},
};
}
// js-side
import { render } = from 'jsx-mail';
const template = await render('Welcome', { name: 'John' });
console.log(template) // <html>...<h1>John Welcome to jsx-mail</h1>...</html>
See the documentation here
If you've ever needed to create email templates, you know how complex it can be, from having to host the image on a separate server to a footer that appears overlaying the main button. So why use jsx? Because it solves all that for you! But ok, if you're still not convinced, here's a list of perks:
<!-- html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Button</title>
</head>
<body>
<table>
<tr>
<td>
<a style="background-color: red" href="https://example.com">
I'm a button
</a>
</td>
</tr>
</table>
</body>
</html>
// jsx-mail
import { Button } from 'jsx-mail/components';
import styled from 'styled-components';
export function MyButton({ children }) {
return <ButtonStyled>{children}</ButtonStyled>;
}
const ButtonStyled = styled(Button)`
background-color: red;
`;
Which of these two codes can you understand faster? I believe the second, because the power of jsx is very big when it comes to simplifying codes and making them easier to understand. So this is what jsx-mail brings for creating email templates, all the power of JSX.
jsx-mail improves email template compatibility. This means that email templates created with JSX-Mail will display correctly in all email clients, including the most popular ones like Gmail, Yahoo! Mail and Outlook. What it does is block the use of some html tags or css attributes which are not accepted in email clients.
With the jsx-mail cli (tool included in jsx-mail) you can simplify the development process, since you can use the serve command for jsx to start an application that simulates an email client.
FAQs
A framework to create the look of your emails. 🚀✉️
The npm package @beforeyoubid/jsx-mail receives a total of 5 weekly downloads. As such, @beforeyoubid/jsx-mail popularity was classified as not popular.
We found that @beforeyoubid/jsx-mail demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 7 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.