Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@faire/mjml-react

Package Overview
Dependencies
Maintainers
3
Versions
23
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@faire/mjml-react - npm Package Compare versions

Comparing version 3.0.3-main-alpha.1 to 3.1.0

6

CHANGELOG.md

@@ -1,6 +0,6 @@

## [3.0.3-main-alpha.1](https://github.com/Faire/mjml-react/compare/v3.0.2...v3.0.3-main-alpha.1) (2023-01-16)
# [3.1.0](https://github.com/Faire/mjml-react/compare/v3.0.2...v3.1.0) (2023-01-17)
### Performance Improvements
### Features
* **update:** start v4 mjml-react ([9c908c6](https://github.com/Faire/mjml-react/commit/9c908c6407f08a015a54e64f3493939ce117d839))
* **simplify:** prevent mjml-style from breaking css and relax type safety ([#78](https://github.com/Faire/mjml-react/issues/78)) ([27f0887](https://github.com/Faire/mjml-react/commit/27f08877215b13a5a66382ddf11f525211a5c8a7))

2

esm/mjml/MjmlAccordion.js

@@ -6,5 +6,5 @@ /*

import React from "react";
import { convertPropsToMjmlAttributes, } from "../utils";
import { convertPropsToMjmlAttributes } from "../utils";
export function MjmlAccordion({ children, ...props }) {
return React.createElement("mj-accordion", convertPropsToMjmlAttributes(props), children);
}

2

esm/mjml/MjmlAccordionText.js

@@ -6,5 +6,5 @@ /*

import React from "react";
import { convertPropsToMjmlAttributes, } from "../utils";
import { convertPropsToMjmlAttributes } from "../utils";
export function MjmlAccordionText({ children, ...props }) {
return React.createElement("mj-accordion-text", convertPropsToMjmlAttributes(props), children);
}

2

esm/mjml/MjmlAccordionTitle.js

@@ -6,5 +6,5 @@ /*

import React from "react";
import { convertPropsToMjmlAttributes, } from "../utils";
import { convertPropsToMjmlAttributes } from "../utils";
export function MjmlAccordionTitle({ children, ...props }) {
return React.createElement("mj-accordion-title", convertPropsToMjmlAttributes(props), children);
}

2

esm/mjml/MjmlButton.js

@@ -6,5 +6,5 @@ /*

import React from "react";
import { convertPropsToMjmlAttributes, } from "../utils";
import { convertPropsToMjmlAttributes } from "../utils";
export function MjmlButton({ children, ...props }) {
return React.createElement("mj-button", convertPropsToMjmlAttributes(props), children);
}

2

esm/mjml/MjmlCarousel.js

@@ -6,5 +6,5 @@ /*

import React from "react";
import { convertPropsToMjmlAttributes, } from "../utils";
import { convertPropsToMjmlAttributes } from "../utils";
export function MjmlCarousel({ children, ...props }) {
return React.createElement("mj-carousel", convertPropsToMjmlAttributes(props), children);
}

2

esm/mjml/MjmlCarouselImage.js

@@ -6,5 +6,5 @@ /*

import React from "react";
import { convertPropsToMjmlAttributes, } from "../utils";
import { convertPropsToMjmlAttributes } from "../utils";
export function MjmlCarouselImage({ children, ...props }) {
return React.createElement("mj-carousel-image", convertPropsToMjmlAttributes(props), children);
}

2

esm/mjml/MjmlColumn.js

@@ -6,5 +6,5 @@ /*

import React from "react";
import { convertPropsToMjmlAttributes, } from "../utils";
import { convertPropsToMjmlAttributes } from "../utils";
export function MjmlColumn({ children, ...props }) {
return React.createElement("mj-column", convertPropsToMjmlAttributes(props), children);
}

2

esm/mjml/MjmlDivider.js

@@ -6,5 +6,5 @@ /*

import React from "react";
import { convertPropsToMjmlAttributes, } from "../utils";
import { convertPropsToMjmlAttributes } from "../utils";
export function MjmlDivider(props) {
return React.createElement("mj-divider", convertPropsToMjmlAttributes(props));
}

2

esm/mjml/MjmlHero.js

@@ -6,5 +6,5 @@ /*

import React from "react";
import { convertPropsToMjmlAttributes, } from "../utils";
import { convertPropsToMjmlAttributes } from "../utils";
export function MjmlHero({ children, ...props }) {
return React.createElement("mj-hero", convertPropsToMjmlAttributes(props), children);
}

2

esm/mjml/MjmlImage.js

@@ -6,5 +6,5 @@ /*

import React from "react";
import { convertPropsToMjmlAttributes, } from "../utils";
import { convertPropsToMjmlAttributes } from "../utils";
export function MjmlImage(props) {
return React.createElement("mj-image", convertPropsToMjmlAttributes(props));
}

2

esm/mjml/MjmlNavbar.js

@@ -6,5 +6,5 @@ /*

import React from "react";
import { convertPropsToMjmlAttributes, } from "../utils";
import { convertPropsToMjmlAttributes } from "../utils";
export function MjmlNavbar({ children, ...props }) {
return React.createElement("mj-navbar", convertPropsToMjmlAttributes(props), children);
}

2

esm/mjml/MjmlNavbarLink.js

@@ -6,5 +6,5 @@ /*

import React from "react";
import { convertPropsToMjmlAttributes, } from "../utils";
import { convertPropsToMjmlAttributes } from "../utils";
export function MjmlNavbarLink({ children, ...props }) {
return React.createElement("mj-navbar-link", convertPropsToMjmlAttributes(props), children);
}

2

esm/mjml/MjmlSection.js

@@ -6,5 +6,5 @@ /*

import React from "react";
import { convertPropsToMjmlAttributes, } from "../utils";
import { convertPropsToMjmlAttributes } from "../utils";
export function MjmlSection({ children, ...props }) {
return React.createElement("mj-section", convertPropsToMjmlAttributes(props), children);
}

2

esm/mjml/MjmlSocial.js

@@ -6,5 +6,5 @@ /*

import React from "react";
import { convertPropsToMjmlAttributes, } from "../utils";
import { convertPropsToMjmlAttributes } from "../utils";
export function MjmlSocial({ children, ...props }) {
return React.createElement("mj-social", convertPropsToMjmlAttributes(props), children);
}

2

esm/mjml/MjmlSocialElement.js

@@ -6,5 +6,5 @@ /*

import React from "react";
import { convertPropsToMjmlAttributes, } from "../utils";
import { convertPropsToMjmlAttributes } from "../utils";
export function MjmlSocialElement({ children, ...props }) {
return React.createElement("mj-social-element", convertPropsToMjmlAttributes(props), children);
}

2

esm/mjml/MjmlSpacer.js

@@ -6,5 +6,5 @@ /*

import React from "react";
import { convertPropsToMjmlAttributes, } from "../utils";
import { convertPropsToMjmlAttributes } from "../utils";
export function MjmlSpacer(props) {
return React.createElement("mj-spacer", convertPropsToMjmlAttributes(props));
}

9

esm/mjml/MjmlStyle.js

@@ -8,3 +8,10 @@ /*

export function MjmlStyle({ children, ...props }) {
return React.createElement("mj-style", convertPropsToMjmlAttributes(props), children);
return React.createElement("mj-style", {
...convertPropsToMjmlAttributes(props),
dangerouslySetInnerHTML: {
__html: props.dangerouslySetInnerHTML
? props.dangerouslySetInnerHTML.__html
: children,
},
});
}

2

esm/mjml/MjmlTable.js

@@ -6,5 +6,5 @@ /*

import React from "react";
import { convertPropsToMjmlAttributes, } from "../utils";
import { convertPropsToMjmlAttributes } from "../utils";
export function MjmlTable({ children, ...props }) {
return React.createElement("mj-table", convertPropsToMjmlAttributes(props), children);
}

2

esm/mjml/MjmlText.js

@@ -6,5 +6,5 @@ /*

import React from "react";
import { convertPropsToMjmlAttributes, } from "../utils";
import { convertPropsToMjmlAttributes } from "../utils";
export function MjmlText({ children, ...props }) {
return React.createElement("mj-text", convertPropsToMjmlAttributes(props), children);
}

2

esm/mjml/MjmlWrapper.js

@@ -6,5 +6,5 @@ /*

import React from "react";
import { convertPropsToMjmlAttributes, } from "../utils";
import { convertPropsToMjmlAttributes } from "../utils";
export function MjmlWrapper({ children, ...props }) {
return React.createElement("mj-wrapper", convertPropsToMjmlAttributes(props), children);
}

1

esm/utils/mjml-component-utils.js
import kebabCase from "lodash.kebabcase";
const DANGEROUSLY_SET_INNER_HTML = "dangerouslySetInnerHTML";
export const typeToUnit = { Pixel: "px", Percentage: "%", Ephemeral: "em" };
export function convertPropsToMjmlAttributes(props) {

@@ -5,0 +4,0 @@ const mjmlProps = Object.entries(props).reduce((mjmlProps, [prop, value]) => {

15

mjml/MjmlAccordion.d.ts
import React from "react";
import { Matrix, Pixel, Percentage } from "../utils";
export interface IMjmlAccordionProps {

@@ -9,4 +8,4 @@ containerBackgroundColor?: string;

iconAlign?: "top" | "middle" | "bottom";
iconWidth?: Pixel | Percentage;
iconHeight?: Pixel | Percentage;
iconWidth?: string | number;
iconHeight?: string | number;
iconWrappedUrl?: string;

@@ -17,8 +16,8 @@ iconWrappedAlt?: string;

iconPosition?: "left" | "right";
paddingBottom?: Pixel | Percentage;
paddingLeft?: Pixel | Percentage;
paddingRight?: Pixel | Percentage;
paddingTop?: Pixel | Percentage;
paddingBottom?: string | number;
paddingLeft?: string | number;
paddingRight?: string | number;
paddingTop?: string | number;
/** MJML default value: 10px 25px */
padding?: Matrix<Pixel | Percentage>;
padding?: string | number;
className?: string;

@@ -25,0 +24,0 @@ cssClass?: string;

5

mjml/MjmlAccordionElement.d.ts
import React from "react";
import { Pixel, Percentage } from "../utils";
export interface IMjmlAccordionElementProps {

@@ -8,4 +7,4 @@ backgroundColor?: React.CSSProperties["backgroundColor"];

iconAlign?: "top" | "middle" | "bottom";
iconWidth?: Pixel | Percentage;
iconHeight?: Pixel | Percentage;
iconWidth?: string | number;
iconHeight?: string | number;
iconWrappedUrl?: string;

@@ -12,0 +11,0 @@ iconWrappedAlt?: string;

17

mjml/MjmlAccordionText.d.ts
import React from "react";
import { Matrix, Pixel, Percentage, Ephemeral } from "../utils";
export interface IMjmlAccordionTextProps {
backgroundColor?: React.CSSProperties["backgroundColor"];
fontSize?: Pixel;
fontSize?: string | number;
fontFamily?: string;
fontWeight?: string;
letterSpacing?: Pixel | Ephemeral;
lineHeight?: Pixel | Percentage;
letterSpacing?: string | number;
lineHeight?: string | number;
color?: React.CSSProperties["color"];
paddingBottom?: Pixel | Percentage;
paddingLeft?: Pixel | Percentage;
paddingRight?: Pixel | Percentage;
paddingTop?: Pixel | Percentage;
paddingBottom?: string | number;
paddingLeft?: string | number;
paddingRight?: string | number;
paddingTop?: string | number;
/** MJML default value: 16px */
padding?: Matrix<Pixel | Percentage>;
padding?: string | number;
className?: string;

@@ -18,0 +17,0 @@ cssClass?: string;

13

mjml/MjmlAccordionTitle.d.ts
import React from "react";
import { Matrix, Pixel, Percentage } from "../utils";
export interface IMjmlAccordionTitleProps {
backgroundColor?: React.CSSProperties["backgroundColor"];
color?: React.CSSProperties["color"];
fontSize?: Pixel;
fontSize?: string | number;
fontFamily?: string;
paddingBottom?: Pixel | Percentage;
paddingLeft?: Pixel | Percentage;
paddingRight?: Pixel | Percentage;
paddingTop?: Pixel | Percentage;
paddingBottom?: string | number;
paddingLeft?: string | number;
paddingRight?: string | number;
paddingTop?: string | number;
/** MJML default value: 16px */
padding?: Matrix<Pixel | Percentage>;
padding?: string | number;
className?: string;

@@ -15,0 +14,0 @@ cssClass?: string;

3

mjml/MjmlBody.d.ts
import React from "react";
import { Pixel } from "../utils";
export interface IMjmlBodyProps {
/** MJML default value: 600px */
width?: Pixel;
width?: string | number;
backgroundColor?: React.CSSProperties["backgroundColor"];

@@ -7,0 +6,0 @@ className?: string;

23

mjml/MjmlButton.d.ts
import React from "react";
import { Matrix, Pixel, Percentage, Ephemeral } from "../utils";
export interface IMjmlButtonProps {

@@ -18,18 +17,18 @@ /** MJML default value: center */

fontFamily?: string;
fontSize?: Pixel;
fontSize?: string | number;
fontStyle?: string;
fontWeight?: string;
height?: Pixel | Percentage;
height?: string | number;
href?: string;
name?: string;
title?: string;
innerPadding?: Matrix<Pixel | Percentage>;
letterSpacing?: Pixel | Ephemeral;
lineHeight?: Pixel | Percentage;
paddingBottom?: Pixel | Percentage;
paddingLeft?: Pixel | Percentage;
paddingRight?: Pixel | Percentage;
paddingTop?: Pixel | Percentage;
innerPadding?: string | number;
letterSpacing?: string | number;
lineHeight?: string | number;
paddingBottom?: string | number;
paddingLeft?: string | number;
paddingRight?: string | number;
paddingTop?: string | number;
/** MJML default value: 10px 25px */
padding?: Matrix<Pixel | Percentage>;
padding?: string | number;
rel?: string;

@@ -42,3 +41,3 @@ /** MJML default value: _blank */

textAlign?: React.CSSProperties["textAlign"];
width?: Pixel | Percentage;
width?: string | number;
className?: string;

@@ -45,0 +44,0 @@ cssClass?: string;

17

mjml/MjmlCarousel.d.ts
import React from "react";
import { Matrix, Pixel, Percentage } from "../utils";
export interface IMjmlCarouselProps {

@@ -8,9 +7,9 @@ /** MJML default value: center */

containerBackgroundColor?: string;
iconWidth?: Pixel | Percentage;
iconWidth?: string | number;
leftIcon?: string;
padding?: Matrix<Pixel | Percentage>;
paddingTop?: Pixel | Percentage;
paddingBottom?: Pixel | Percentage;
paddingLeft?: Pixel | Percentage;
paddingRight?: Pixel | Percentage;
padding?: string | number;
paddingTop?: string | number;
paddingBottom?: string | number;
paddingLeft?: string | number;
paddingRight?: string | number;
rightIcon?: string;

@@ -20,6 +19,6 @@ /** MJML default value: visible */

tbBorder?: string;
tbBorderRadius?: Pixel | Percentage;
tbBorderRadius?: string | number;
tbHoverBorderColor?: string;
tbSelectedBorderColor?: string;
tbWidth?: Pixel | Percentage;
tbWidth?: string | number;
className?: string;

@@ -26,0 +25,0 @@ cssClass?: string;

3

mjml/MjmlCarouselImage.d.ts
import React from "react";
import { Matrix, Pixel, Percentage } from "../utils";
export interface IMjmlCarouselImageProps {

@@ -14,3 +13,3 @@ alt?: string;

tbBorder?: string;
tbBorderRadius?: Matrix<Pixel | Percentage>;
tbBorderRadius?: string | number;
className?: string;

@@ -17,0 +16,0 @@ cssClass?: string;

15

mjml/MjmlColumn.d.ts
import React from "react";
import { Matrix, Pixel, Percentage } from "../utils";
export interface IMjmlColumnProps {

@@ -14,15 +13,15 @@ backgroundColor?: React.CSSProperties["backgroundColor"];

innerBackgroundColor?: string;
paddingBottom?: Pixel | Percentage;
paddingLeft?: Pixel | Percentage;
paddingRight?: Pixel | Percentage;
paddingTop?: Pixel | Percentage;
paddingBottom?: string | number;
paddingLeft?: string | number;
paddingRight?: string | number;
paddingTop?: string | number;
innerBorder?: string;
innerBorderBottom?: string;
innerBorderLeft?: string;
innerBorderRadius?: Matrix<Pixel | Percentage>;
innerBorderRadius?: string | number;
innerBorderRight?: string;
innerBorderTop?: string;
padding?: Matrix<Pixel | Percentage>;
padding?: string | number;
verticalAlign?: React.CSSProperties["verticalAlign"];
width?: Pixel | Percentage;
width?: string | number;
className?: string;

@@ -29,0 +28,0 @@ cssClass?: string;

15

mjml/MjmlDivider.d.ts
import React from "react";
import { Matrix, Pixel, Percentage } from "../utils";
export interface IMjmlDividerProps {
borderColor?: React.CSSProperties["borderColor"];
borderStyle?: React.CSSProperties["borderStyle"];
borderWidth?: Pixel;
borderWidth?: string | number;
containerBackgroundColor?: string;
/** MJML default value: 10px 25px */
padding?: Matrix<Pixel | Percentage>;
paddingBottom?: Pixel | Percentage;
paddingLeft?: Pixel | Percentage;
paddingRight?: Pixel | Percentage;
paddingTop?: Pixel | Percentage;
padding?: string | number;
paddingBottom?: string | number;
paddingLeft?: string | number;
paddingRight?: string | number;
paddingTop?: string | number;
/** MJML default value: 100% */
width?: Pixel | Percentage;
width?: string | number;
/** MJML default value: center */

@@ -17,0 +16,0 @@ align?: "left" | "center" | "right";

3

mjml/MjmlGroup.d.ts
import React from "react";
import { Pixel, Percentage } from "../utils";
export interface IMjmlGroupProps {

@@ -8,3 +7,3 @@ backgroundColor?: React.CSSProperties["backgroundColor"];

verticalAlign?: React.CSSProperties["verticalAlign"];
width?: Pixel | Percentage;
width?: string | number;
className?: string;

@@ -11,0 +10,0 @@ cssClass?: string;

27

mjml/MjmlHero.d.ts
import React from "react";
import { Matrix, Pixel, Percentage } from "../utils";
export interface IMjmlHeroProps {

@@ -7,6 +6,6 @@ /** MJML default value: fixed-height */

/** MJML default value: 0px */
height?: Pixel | Percentage;
height?: string | number;
backgroundUrl?: string;
backgroundWidth?: Pixel | Percentage;
backgroundHeight?: Pixel | Percentage;
backgroundWidth?: string | number;
backgroundHeight?: string | number;
backgroundPosition?: React.CSSProperties["backgroundPosition"];

@@ -16,13 +15,13 @@ borderRadius?: React.CSSProperties["borderRadius"];

innerBackgroundColor?: string;
innerPadding?: Matrix<Pixel | Percentage>;
innerPaddingTop?: Pixel | Percentage;
innerPaddingLeft?: Pixel | Percentage;
innerPaddingRight?: Pixel | Percentage;
innerPaddingBottom?: Pixel | Percentage;
innerPadding?: string | number;
innerPaddingTop?: string | number;
innerPaddingLeft?: string | number;
innerPaddingRight?: string | number;
innerPaddingBottom?: string | number;
/** MJML default value: 0px */
padding?: Matrix<Pixel | Percentage>;
paddingBottom?: Pixel | Percentage;
paddingLeft?: Pixel | Percentage;
paddingRight?: Pixel | Percentage;
paddingTop?: Pixel | Percentage;
padding?: string | number;
paddingBottom?: string | number;
paddingLeft?: string | number;
paddingRight?: string | number;
paddingTop?: string | number;
backgroundColor?: React.CSSProperties["backgroundColor"];

@@ -29,0 +28,0 @@ verticalAlign?: React.CSSProperties["verticalAlign"];

19

mjml/MjmlImage.d.ts
import React from "react";
import { Matrix, Pixel, Percentage } from "../utils";
export interface IMjmlImageProps {

@@ -24,14 +23,14 @@ alt?: string;

/** MJML default value: 10px 25px */
padding?: Matrix<Pixel | Percentage>;
paddingBottom?: Pixel | Percentage;
paddingLeft?: Pixel | Percentage;
paddingRight?: Pixel | Percentage;
paddingTop?: Pixel | Percentage;
padding?: string | number;
paddingBottom?: string | number;
paddingLeft?: string | number;
paddingRight?: string | number;
paddingTop?: string | number;
/** MJML default value: _blank */
target?: string;
width?: Pixel;
width?: string | number;
/** MJML default value: auto */
height?: Pixel;
maxHeight?: Pixel | Percentage;
fontSize?: Pixel;
height?: string | number;
maxHeight?: string | number;
fontSize?: string | number;
usemap?: string;

@@ -38,0 +37,0 @@ className?: string;

25

mjml/MjmlNavbar.d.ts
import React from "react";
import { Matrix, Pixel, Percentage } from "../utils";
export interface IMjmlNavbarProps {

@@ -12,17 +11,17 @@ /** MJML default value: center */

icoColor?: string;
icoFontSize?: Pixel | Percentage;
icoFontSize?: string | number;
icoFontFamily?: string;
icoTextTransform?: string;
icoPadding?: Matrix<Pixel | Percentage>;
icoPaddingLeft?: Pixel | Percentage;
icoPaddingTop?: Pixel | Percentage;
icoPaddingRight?: Pixel | Percentage;
icoPaddingBottom?: Pixel | Percentage;
padding?: Matrix<Pixel | Percentage>;
paddingLeft?: Pixel | Percentage;
paddingTop?: Pixel | Percentage;
paddingRight?: Pixel | Percentage;
paddingBottom?: Pixel | Percentage;
icoPadding?: string | number;
icoPaddingLeft?: string | number;
icoPaddingTop?: string | number;
icoPaddingRight?: string | number;
icoPaddingBottom?: string | number;
padding?: string | number;
paddingLeft?: string | number;
paddingTop?: string | number;
paddingRight?: string | number;
paddingBottom?: string | number;
icoTextDecoration?: string;
icoLineHeight?: Pixel | Percentage;
icoLineHeight?: string | number;
className?: string;

@@ -29,0 +28,0 @@ cssClass?: string;

17

mjml/MjmlNavbarLink.d.ts
import React from "react";
import { Matrix, Pixel, Percentage, Ephemeral } from "../utils";
export interface IMjmlNavbarLinkProps {

@@ -7,3 +6,3 @@ /** MJML default value: #000000 */

fontFamily?: string;
fontSize?: Pixel;
fontSize?: string | number;
fontStyle?: string;

@@ -16,10 +15,10 @@ fontWeight?: string;

rel?: string;
letterSpacing?: Pixel | Ephemeral;
lineHeight?: Pixel | Percentage;
paddingBottom?: Pixel | Percentage;
paddingLeft?: Pixel | Percentage;
paddingRight?: Pixel | Percentage;
paddingTop?: Pixel | Percentage;
letterSpacing?: string | number;
lineHeight?: string | number;
paddingBottom?: string | number;
paddingLeft?: string | number;
paddingRight?: string | number;
paddingTop?: string | number;
/** MJML default value: 15px 10px */
padding?: Matrix<Pixel | Percentage>;
padding?: string | number;
textDecoration?: React.CSSProperties["textDecoration"];

@@ -26,0 +25,0 @@ textTransform?: React.CSSProperties["textTransform"];

13

mjml/MjmlSection.d.ts
import React from "react";
import { Matrix, Pixel, Percentage } from "../utils";
export interface IMjmlSectionProps {

@@ -21,9 +20,9 @@ backgroundColor?: React.CSSProperties["backgroundColor"];

/** MJML default value: 20px 0 */
padding?: Matrix<Pixel | Percentage>;
paddingTop?: Pixel | Percentage;
paddingBottom?: Pixel | Percentage;
paddingLeft?: Pixel | Percentage;
paddingRight?: Pixel | Percentage;
padding?: string | number;
paddingTop?: string | number;
paddingBottom?: string | number;
paddingLeft?: string | number;
paddingRight?: string | number;
textAlign?: React.CSSProperties["textAlign"];
textPadding?: Matrix<Pixel | Percentage>;
textPadding?: string | number;
className?: string;

@@ -30,0 +29,0 @@ cssClass?: string;

25

mjml/MjmlSocial.d.ts
import React from "react";
import { Matrix, Pixel, Percentage } from "../utils";
export interface IMjmlSocialProps {

@@ -11,20 +10,20 @@ /** MJML default value: center */

fontFamily?: string;
fontSize?: Pixel;
fontSize?: string | number;
fontStyle?: string;
fontWeight?: string;
iconSize?: Pixel | Percentage;
iconHeight?: Pixel | Percentage;
iconPadding?: Matrix<Pixel | Percentage>;
innerPadding?: Matrix<Pixel | Percentage>;
lineHeight?: Pixel | Percentage;
iconSize?: string | number;
iconHeight?: string | number;
iconPadding?: string | number;
innerPadding?: string | number;
lineHeight?: string | number;
/** MJML default value: horizontal */
mode?: "horizontal" | "vertical";
paddingBottom?: Pixel | Percentage;
paddingLeft?: Pixel | Percentage;
paddingRight?: Pixel | Percentage;
paddingTop?: Pixel | Percentage;
paddingBottom?: string | number;
paddingLeft?: string | number;
paddingRight?: string | number;
paddingTop?: string | number;
/** MJML default value: 10px 25px */
padding?: Matrix<Pixel | Percentage>;
padding?: string | number;
tableLayout?: "auto" | "fixed";
textPadding?: Matrix<Pixel | Percentage>;
textPadding?: string | number;
textDecoration?: React.CSSProperties["textDecoration"];

@@ -31,0 +30,0 @@ verticalAlign?: React.CSSProperties["verticalAlign"];

23

mjml/MjmlSocialElement.d.ts
import React from "react";
import { Matrix, Pixel, Percentage } from "../utils";
export interface IMjmlSocialElementProps {

@@ -11,18 +10,18 @@ /** MJML default value: left */

fontFamily?: string;
fontSize?: Pixel;
fontSize?: string | number;
fontStyle?: string;
fontWeight?: string;
href?: string;
iconSize?: Pixel | Percentage;
iconHeight?: Pixel | Percentage;
iconPadding?: Matrix<Pixel | Percentage>;
lineHeight?: Pixel | Percentage;
iconSize?: string | number;
iconHeight?: string | number;
iconPadding?: string | number;
lineHeight?: string | number;
name?: string;
paddingBottom?: Pixel | Percentage;
paddingLeft?: Pixel | Percentage;
paddingRight?: Pixel | Percentage;
paddingTop?: Pixel | Percentage;
paddingBottom?: string | number;
paddingLeft?: string | number;
paddingRight?: string | number;
paddingTop?: string | number;
/** MJML default value: 4px */
padding?: Matrix<Pixel | Percentage>;
textPadding?: Matrix<Pixel | Percentage>;
padding?: string | number;
textPadding?: string | number;
rel?: string;

@@ -29,0 +28,0 @@ src?: string;

13

mjml/MjmlSpacer.d.ts
import React from "react";
import { Matrix, Pixel, Percentage } from "../utils";
export interface IMjmlSpacerProps {

@@ -10,9 +9,9 @@ border?: React.CSSProperties["border"];

containerBackgroundColor?: string;
paddingBottom?: Pixel | Percentage;
paddingLeft?: Pixel | Percentage;
paddingRight?: Pixel | Percentage;
paddingTop?: Pixel | Percentage;
padding?: Matrix<Pixel | Percentage>;
paddingBottom?: string | number;
paddingLeft?: string | number;
paddingRight?: string | number;
paddingTop?: string | number;
padding?: string | number;
/** MJML default value: 20px */
height?: Pixel | Percentage;
height?: string | number;
className?: string;

@@ -19,0 +18,0 @@ cssClass?: string;

6

mjml/MjmlStyle.js

@@ -26,4 +26,8 @@ "use strict";

var { children } = _a, props = __rest(_a, ["children"]);
return react_1.default.createElement("mj-style", (0, utils_1.convertPropsToMjmlAttributes)(props), children);
return react_1.default.createElement("mj-style", Object.assign(Object.assign({}, (0, utils_1.convertPropsToMjmlAttributes)(props)), { dangerouslySetInnerHTML: {
__html: props.dangerouslySetInnerHTML
? props.dangerouslySetInnerHTML.__html
: children,
} }));
}
exports.MjmlStyle = MjmlStyle;

17

mjml/MjmlTable.d.ts
import React from "react";
import { Matrix, Pixel, Percentage } from "../utils";
export interface IMjmlTableProps {

@@ -16,11 +15,11 @@ /** MJML default value: left */

fontFamily?: string;
fontSize?: Pixel;
fontSize?: string | number;
fontWeight?: string;
lineHeight?: Pixel | Percentage;
paddingBottom?: Pixel | Percentage;
paddingLeft?: Pixel | Percentage;
paddingRight?: Pixel | Percentage;
paddingTop?: Pixel | Percentage;
lineHeight?: string | number;
paddingBottom?: string | number;
paddingLeft?: string | number;
paddingRight?: string | number;
paddingTop?: string | number;
/** MJML default value: 10px 25px */
padding?: Matrix<Pixel | Percentage>;
padding?: string | number;
role?: "none" | "presentation";

@@ -30,3 +29,3 @@ tableLayout?: "auto" | "fixed" | "initial" | "inherit";

/** MJML default value: 100% */
width?: Pixel | Percentage;
width?: string | number;
className?: string;

@@ -33,0 +32,0 @@ cssClass?: string;

19

mjml/MjmlText.d.ts
import React from "react";
import { Matrix, Pixel, Percentage, Ephemeral } from "../utils";
export interface IMjmlTextProps {

@@ -11,14 +10,14 @@ /** MJML default value: left */

fontFamily?: string;
fontSize?: Pixel;
fontSize?: string | number;
fontStyle?: string;
fontWeight?: string;
height?: Pixel | Percentage;
letterSpacing?: Pixel | Ephemeral;
lineHeight?: Pixel | Percentage;
paddingBottom?: Pixel | Percentage;
paddingLeft?: Pixel | Percentage;
paddingRight?: Pixel | Percentage;
paddingTop?: Pixel | Percentage;
height?: string | number;
letterSpacing?: string | number;
lineHeight?: string | number;
paddingBottom?: string | number;
paddingLeft?: string | number;
paddingRight?: string | number;
paddingTop?: string | number;
/** MJML default value: 10px 25px */
padding?: Matrix<Pixel | Percentage>;
padding?: string | number;
textDecoration?: React.CSSProperties["textDecoration"];

@@ -25,0 +24,0 @@ textTransform?: React.CSSProperties["textTransform"];

13

mjml/MjmlWrapper.d.ts
import React from "react";
import { Matrix, Pixel, Percentage } from "../utils";
export interface IMjmlWrapperProps {

@@ -21,9 +20,9 @@ backgroundColor?: React.CSSProperties["backgroundColor"];

/** MJML default value: 20px 0 */
padding?: Matrix<Pixel | Percentage>;
paddingTop?: Pixel | Percentage;
paddingBottom?: Pixel | Percentage;
paddingLeft?: Pixel | Percentage;
paddingRight?: Pixel | Percentage;
padding?: string | number;
paddingTop?: string | number;
paddingBottom?: string | number;
paddingLeft?: string | number;
paddingRight?: string | number;
textAlign?: React.CSSProperties["textAlign"];
textPadding?: Matrix<Pixel | Percentage>;
textPadding?: string | number;
className?: string;

@@ -30,0 +29,0 @@ cssClass?: string;

2

package.json
{
"name": "@faire/mjml-react",
"version": "3.0.3-main-alpha.1",
"version": "3.1.0",
"license": "MIT",

@@ -5,0 +5,0 @@ "description": "React component library to generate the HTML emails on the fly",

20

README.md

@@ -20,2 +20,22 @@ ## Annoucement from Engineering @ Faire

## Get started today with V2 - 100% backwards compatible with https://github.com/wix-incubator/mjml-react/
V2 is a drop in replacement for https://github.com/wix-incubator/mjml-react/, with some additional support. If there's a component missing you can make a PR against https://github.com/Faire/mjml-react/tree/main-v2 or submit an issue and we'll try to unblock you.
## What's new in V3?
We wanted V3 of mjml-react to be fairly easy to migrate to from V2. We will implement more advanced features in V4. The main updates in V3 include:
- Typescript: mjml-react is now written in typescript which helps ensure correct props are passed to mjml components
- Full mjml component support: We use an automated script for pulling mjml components and creating a corresponding mjml-react component. This means we get full support of all components available in the latest mjml version
- Other small changes: add dangerouslySetInnerHTML in mjml-react for mjml ending tags, update testing, add in-code documenation
## What's coming in V4?
In V4 we are exploring exciting features that will make mjml-react even more powerful. This includes:
- Improved prop type safety: help ensure correct formatting for props like padding, width, and height
If you want to be on the cutting edge of what is being released, we are publishing a [v4-main-alpha version](https://www.npmjs.com/package/@faire/mjml-react/v/main-alpha) to npm.
## How it works

@@ -22,0 +42,0 @@

9

utils/mjml-component-utils.d.ts

@@ -1,10 +0,1 @@

export declare type Matrix<E extends string | number> = E | `${E} ${E}` | `${E} ${E} ${E}` | `${E} ${E} ${E} ${E}`;
export declare type Pixel = number | `${number}` | `${number}px`;
export declare type Percentage = number | `${number}` | `${number}%`;
export declare type Ephemeral = number | `${number}` | `${number}em`;
export declare const typeToUnit: {
Pixel: string;
Percentage: string;
Ephemeral: string;
};
declare type MJMLDangerouslySetInnerHTML = {

@@ -11,0 +2,0 @@ __html: string;

3

utils/mjml-component-utils.js

@@ -6,6 +6,5 @@ "use strict";

Object.defineProperty(exports, "__esModule", { value: true });
exports.convertPropsToMjmlAttributes = exports.typeToUnit = void 0;
exports.convertPropsToMjmlAttributes = void 0;
const lodash_kebabcase_1 = __importDefault(require("lodash.kebabcase"));
const DANGEROUSLY_SET_INNER_HTML = "dangerouslySetInnerHTML";
exports.typeToUnit = { Pixel: "px", Percentage: "%", Ephemeral: "em" };
function convertPropsToMjmlAttributes(props) {

@@ -12,0 +11,0 @@ const mjmlProps = Object.entries(props).reduce((mjmlProps, [prop, value]) => {

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc