@react-email/body 0.0.1 → 0.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts +1 -2
- package/dist/index.js +1 -1
- package/dist/index.mjs +1 -1
- package/package.json +22 -9
- package/readme.md +13 -17
package/dist/index.d.ts
CHANGED
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
type RootProps = React.ComponentPropsWithoutRef<"body">;
|
|
4
4
|
interface BodyProps extends RootProps {
|
|
5
|
-
style?: React.CSSProperties;
|
|
6
5
|
}
|
|
7
6
|
declare const Body: React.FC<Readonly<BodyProps>>;
|
|
8
7
|
|
package/dist/index.js
CHANGED
|
@@ -35,7 +35,7 @@ var Body = ({
|
|
|
35
35
|
wordSpacing: "normal",
|
|
36
36
|
...style
|
|
37
37
|
};
|
|
38
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("body", { ...props, style, children });
|
|
38
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("body", { ...props, "data-id": "__react-email-body", style, children });
|
|
39
39
|
};
|
|
40
40
|
Body.displayName = "Body";
|
|
41
41
|
// Annotate the CommonJS export names for ESM import in node:
|
package/dist/index.mjs
CHANGED
|
@@ -9,7 +9,7 @@ var Body = ({
|
|
|
9
9
|
wordSpacing: "normal",
|
|
10
10
|
...style
|
|
11
11
|
};
|
|
12
|
-
return /* @__PURE__ */ jsx("body", { ...props, style, children });
|
|
12
|
+
return /* @__PURE__ */ jsx("body", { ...props, "data-id": "__react-email-body", style, children });
|
|
13
13
|
};
|
|
14
14
|
Body.displayName = "Body";
|
|
15
15
|
export {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@react-email/body",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.3",
|
|
4
4
|
"description": "A React body component to wrap emails",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -9,6 +9,18 @@
|
|
|
9
9
|
"files": [
|
|
10
10
|
"dist/**"
|
|
11
11
|
],
|
|
12
|
+
"exports": {
|
|
13
|
+
".": {
|
|
14
|
+
"import": {
|
|
15
|
+
"types": "./dist/index.d.ts",
|
|
16
|
+
"default": "./dist/index.mjs"
|
|
17
|
+
},
|
|
18
|
+
"require": {
|
|
19
|
+
"types": "./dist/index.d.ts",
|
|
20
|
+
"default": "./dist/index.js"
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
},
|
|
12
24
|
"license": "MIT",
|
|
13
25
|
"scripts": {
|
|
14
26
|
"build": "tsup src/index.ts --format esm,cjs --dts --external react",
|
|
@@ -17,25 +29,26 @@
|
|
|
17
29
|
"clean": "rm -rf dist",
|
|
18
30
|
"test": "jest",
|
|
19
31
|
"test:watch": "jest --watch",
|
|
20
|
-
"format:check": "prettier --
|
|
21
|
-
"format": "prettier --
|
|
32
|
+
"format:check": "prettier --check \"**/*.{ts,tsx,md}\"",
|
|
33
|
+
"format": "prettier --write \"**/*.{ts,tsx,md}\""
|
|
22
34
|
},
|
|
23
35
|
"dependencies": {
|
|
24
36
|
"react": "18.2.0"
|
|
25
37
|
},
|
|
26
38
|
"devDependencies": {
|
|
27
|
-
"@babel/
|
|
28
|
-
"@react
|
|
39
|
+
"@babel/core": "7.21.8",
|
|
40
|
+
"@babel/preset-react": "7.22.5",
|
|
41
|
+
"@react-email/render": "0.0.6",
|
|
42
|
+
"@types/jest": "29.5.3",
|
|
29
43
|
"@types/react": "18.0.20",
|
|
30
44
|
"@types/react-dom": "18.0.6",
|
|
31
45
|
"babel-jest": "28.1.3",
|
|
32
|
-
"eslint": "8.
|
|
33
|
-
"eslint-config-custom": "*",
|
|
46
|
+
"eslint": "8.45.0",
|
|
34
47
|
"jest": "28.1.3",
|
|
48
|
+
"prettier": "3.0.0",
|
|
35
49
|
"ts-jest": "28.0.8",
|
|
36
|
-
"tsconfig": "*",
|
|
37
50
|
"tsup": "6.2.3",
|
|
38
|
-
"typescript": "
|
|
51
|
+
"typescript": "5.1.6"
|
|
39
52
|
},
|
|
40
53
|
"publishConfig": {
|
|
41
54
|
"access": "public"
|
package/readme.md
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
2
2
|
|
|
3
3
|
<div align="center"><strong>@react-email/body</strong></div>
|
|
4
4
|
<div align="center">A React body component to wrap emails.</div>
|
|
@@ -18,13 +18,13 @@ Install component from your command line.
|
|
|
18
18
|
#### With yarn
|
|
19
19
|
|
|
20
20
|
```sh
|
|
21
|
-
yarn add @react-email/
|
|
21
|
+
yarn add @react-email/body -E
|
|
22
22
|
```
|
|
23
23
|
|
|
24
24
|
#### With npm
|
|
25
25
|
|
|
26
26
|
```sh
|
|
27
|
-
npm install @react-email/
|
|
27
|
+
npm install @react-email/body -E
|
|
28
28
|
```
|
|
29
29
|
|
|
30
30
|
## Getting started
|
|
@@ -32,22 +32,18 @@ npm install @react-email/html -E
|
|
|
32
32
|
Add the component to your email template. Include styles where needed.
|
|
33
33
|
|
|
34
34
|
```jsx
|
|
35
|
-
import { Html } from
|
|
36
|
-
import { Body } from
|
|
37
|
-
import { Section } from
|
|
38
|
-
import { Column } from
|
|
35
|
+
import { Html } from "@react-email/html";
|
|
36
|
+
import { Body } from "@react-email/body";
|
|
37
|
+
import { Section } from "@react-email/section";
|
|
38
|
+
import { Column } from "@react-email/section";
|
|
39
39
|
|
|
40
40
|
const Email = () => {
|
|
41
41
|
return (
|
|
42
42
|
<Html lang="en">
|
|
43
|
-
<Body style={{ backgroundColor:
|
|
43
|
+
<Body style={{ backgroundColor: "#61dafb" }}>
|
|
44
44
|
<Section>
|
|
45
|
-
<Column style={{ width:
|
|
46
|
-
|
|
47
|
-
</Column>
|
|
48
|
-
<Column style={{ width: '50%'}}>
|
|
49
|
-
{/* Second column */}
|
|
50
|
-
</Column>
|
|
45
|
+
<Column style={{ width: "50%" }}>{/* First column */}</Column>
|
|
46
|
+
<Column style={{ width: "50%" }}>{/* Second column */}</Column>
|
|
51
47
|
</Section>
|
|
52
48
|
</Body>
|
|
53
49
|
</Html>
|
|
@@ -59,9 +55,9 @@ const Email = () => {
|
|
|
59
55
|
|
|
60
56
|
This component was tested using the most popular email clients.
|
|
61
57
|
|
|
62
|
-
| <img src="https://react.email/static/
|
|
63
|
-
|
|
|
64
|
-
| Gmail ✔
|
|
58
|
+
| <img src="https://react.email/static/icons/gmail.svg" width="48px" height="48px" alt="Gmail logo"> | <img src="https://react.email/static/icons/apple-mail.svg" width="48px" height="48px" alt="Apple Mail"> | <img src="https://react.email/static/icons/outlook.svg" width="48px" height="48px" alt="Outlook logo"> | <img src="https://react.email/static/icons/yahoo-mail.svg" width="48px" height="48px" alt="Yahoo! Mail logo"> | <img src="https://react.email/static/icons/hey.svg" width="48px" height="48px" alt="HEY logo"> | <img src="https://react.email/static/icons/superhuman.svg" width="48px" height="48px" alt="Superhuman logo"> |
|
|
59
|
+
| -------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ |
|
|
60
|
+
| Gmail ✔ | Apple Mail ✔ | Outlook ✔ | Yahoo! Mail ✔ | HEY ✔ | Superhuman ✔ |
|
|
65
61
|
|
|
66
62
|
## License
|
|
67
63
|
|