Emails are a different kind of beast. Not every fancy CSS trick you put in works. We built this components' library depending on how Email clients want it. For a start, all the styles are compiled into inline styles. But you do not have to worry about putting styles inline. Our library provides great Developer Experience with easy-to-use mechanisms to let you define the styles as usual but turned to inlined styles at the end of the day when you send the emails. Also, you don't need to worry about the styling and HTML tags guidelines for different email clients, use our components and leave the handling of compatibility to us.
Check out the documentation for more information.
Find the npm package here
Join the Gitter channel here for discussions and support.
Star us on GitHub — it helps!
Using npm
npm i @leopardslab/react-emailor
npm install --save @leopardslab/react-emailUsing Yarn
yarn add @leopardslab/react-emailimport { Email, Section, Column, Typography } from '@leopardslab/react-email';
export const HelloEmail = ({ name }) => {
return (
<Email>
<Section>
<Column>
<Typography variant="h2">Hello {name}</Typography>
</Column>
</Section>
</Email>
);
};Want to add some custom styles?
Here we go:
import { Divider, Email, Section, Column, Typography } from '@leopardslab/react-email';
const styles = {
greyBackground: {
backgroud: 'grey',
},
};
export const HelloEmail = ({ name }) => {
return (
<Email>
<Section>
<Column>
<Typography variant="h2">Hello {name}</Typography>
</Column>
<Divider />
<Column classes={{ root: styles.greyBackground }}>
<Typography variant="h2">Hello {name}</Typography>
</Column>
</Section>
</Email>
);
};You can also define and load a fully custom theme! 🤯
import { Email, Section, Column, Typography } from '@leopardslab/react-email';
import darkTheme from './theme';
export const HelloEmail = ({ name }) => {
return (
<Email theme={darkTheme}>
<Section>
<Column>
<Typography variant="h2">Hello {name}</Typography>
</Column>
</Section>
</Email>
);
};Create your own component like this:
// InfoPanel.jsx
const useStyles = makeStyles({
root: { padding: '10px' },
info: { border: '1px solid #DD5353' },
warn: { border: '1px solid #FF731D' },
});
export const InfoPanel = ({
children,
variant = 'info',
classes, // if you want to override some styles when you are using the component
}) => {
const styles = useStyles({ classes });
const infoPanelStyle = sx(styles.root, styles[variant]); // combines root and variant specific styles
return <div style={infoPanelStyle}>{children}</div>;
};
// HelloWorld.jsx
import { InfoPanel } from './InfoPanel';
const styles = {
greyBackground: {
backgroud: 'grey',
},
};
export const HelloEmail = ({ name }) => {
return (
<Email theme={darkTheme}>
<Section>
<Column>
<InfoPanel variant="info">Hello {name}!!!!</InfoPanel>
<InfoPanel variant="warn" classes={{ root: styles.greyBackground }}>
Be prepared!
</InfoPanel>
</Column>
</Section>
</Email>
);
};The idea of a React Component Library for Emails is not novel. There have been other implementations around for a while and we were inspired a lot by these solutions and many other generic Component Libraries. Following are a few of the amazing other implementations.
We try to be the community backed up-to-date solution one can depend on and contribute back, request features & seek help.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent