Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
@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
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
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.