@react-email/body 0.0.1 → 0.0.2
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 +4 -6
- package/readme.md +9 -13
package/dist/index.d.ts
CHANGED
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
|
|
3
|
-
declare type RootProps = React.ComponentPropsWithoutRef<
|
|
3
|
+
declare 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.2",
|
|
4
4
|
"description": "A React body component to wrap emails",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -17,23 +17,21 @@
|
|
|
17
17
|
"clean": "rm -rf dist",
|
|
18
18
|
"test": "jest",
|
|
19
19
|
"test:watch": "jest --watch",
|
|
20
|
-
"format:check": "prettier --
|
|
21
|
-
"format": "prettier --
|
|
20
|
+
"format:check": "prettier --check \"**/*.{ts,tsx,md}\"",
|
|
21
|
+
"format": "prettier --write \"**/*.{ts,tsx,md}\""
|
|
22
22
|
},
|
|
23
23
|
"dependencies": {
|
|
24
24
|
"react": "18.2.0"
|
|
25
25
|
},
|
|
26
26
|
"devDependencies": {
|
|
27
27
|
"@babel/preset-react": "7.18.6",
|
|
28
|
-
"@react-email/render": "*",
|
|
29
28
|
"@types/react": "18.0.20",
|
|
30
29
|
"@types/react-dom": "18.0.6",
|
|
31
30
|
"babel-jest": "28.1.3",
|
|
32
31
|
"eslint": "8.23.1",
|
|
33
|
-
"eslint-config-custom": "*",
|
|
34
32
|
"jest": "28.1.3",
|
|
33
|
+
"prettier": "2.8.4",
|
|
35
34
|
"ts-jest": "28.0.8",
|
|
36
|
-
"tsconfig": "*",
|
|
37
35
|
"tsup": "6.2.3",
|
|
38
36
|
"typescript": "4.8.3"
|
|
39
37
|
},
|
package/readme.md
CHANGED
|
@@ -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>
|