
Product
A New Overview in our Dashboard
We redesigned Socket's first logged-in page to display rich and insightful visualizations about your repositories protected against supply chain threats.
@react-email/container
Advanced tools
@react-email/container is a React component library designed to help developers create responsive email templates with ease. It provides a set of components that can be used to structure and style email content, ensuring compatibility across various email clients.
Container Component
The Container component is used to wrap the main content of the email, providing a consistent layout and styling.
<Container>
<p>Your email content goes here</p>
</Container>
Responsive Design
The Container component supports responsive design, allowing you to set styles such as max-width and margin to ensure the email looks good on different screen sizes.
<Container style={{ maxWidth: '600px', margin: '0 auto' }}>
<p>Your responsive email content goes here</p>
</Container>
Custom Styling
You can apply custom styles to the Container component to match your email's design requirements, such as background color and padding.
<Container style={{ backgroundColor: '#f0f0f0', padding: '20px' }}>
<p>Your custom styled email content goes here</p>
</Container>
react-html-email is a library for building HTML emails with React components. It provides a set of components and utilities to create responsive and well-structured email templates. Compared to @react-email/container, react-html-email offers a broader range of components specifically designed for email development.
mjml-react is a React wrapper for MJML, a markup language designed to reduce the pain of coding responsive emails. It allows you to use MJML components within React, providing a high level of abstraction and ease of use. While @react-email/container focuses on basic container functionality, mjml-react offers a comprehensive set of components for building complex email layouts.
Install component from your command line.
yarn add @react-email/container -E
npm install @react-email/container -E
Add the component to your email template. Include styles where needed.
import { Button } from "@react-email/button";
import { Container } from "@react-email/container";
const Email = () => {
return (
<Container>
<Button href="https://example.com" style={{ color: "#61dafb" }}>
Click me
</Button>
</Container>
);
};
MIT License
FAQs
A layout component that centers all the email content
The npm package @react-email/container receives a total of 534,926 weekly downloads. As such, @react-email/container popularity was classified as popular.
We found that @react-email/container demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 3 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.
Product
We redesigned Socket's first logged-in page to display rich and insightful visualizations about your repositories protected against supply chain threats.
Product
Automatically fix and test dependency updates with socket fix—a new CLI tool that turns CVE alerts into safe, automated upgrades.
Security News
CISA denies CVE funding issues amid backlash over a new CVE foundation formed by board members, raising concerns about transparency and program governance.