@react-email/img - npm Package Compare versions

Comparing version 0.0.1 to 0.0.2

dist/index.d.ts

 import * as React from 'react';
 
-declare type RootProps = React.ComponentPropsWithoutRef<'a'>;
-interface ButtonProps extends RootProps {
+declare type RootProps = React.ComponentPropsWithoutRef<'img'>;
+interface ImgProps extends RootProps {
 }
-declare const Button: React.ForwardRefExoticComponent<Readonly<ButtonProps> & React.RefAttributes<HTMLAnchorElement>>;
+declare const Img: React.ForwardRefExoticComponent<Readonly<ImgProps> & React.RefAttributes<HTMLImageElement>>;
 
-export { Button, ButtonProps };
+export { Img, ImgProps };

dist/index.js

@@ -29,24 +29,30 @@ "use strict";
 __export(src_exports, {
-  Button: () => Button
+  Img: () => Img
 });
 module.exports = __toCommonJS(src_exports);
 
-// src/button.tsx
+// src/img.tsx
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
-var Button = React.forwardRef(
-  ({ children, style, target = "_blank", ...props }, forwardedRef) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", {
+var Img = React.forwardRef(
+  ({ alt, src, width, height, style, ...props }, forwardedRef) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", {
     ref: forwardedRef,
-    target,
-    dangerouslySetInnerHTML: {
-      __html: `<!--[if mso]><i style="letter-spacing: 25px;mso-font-width:-100%;mso-text-raise:30pt" hidden>&nbsp;</i><![endif]--><span>${children}</span><!--[if mso]><i style="letter-spacing: 25px;mso-font-width:-100%" hidden>&nbsp;</i><![endif]-->`
+    alt,
+    src,
+    width,
+    height,
+    style: {
+      display: "block",
+      outline: "none",
+      border: "none",
+      textDecoration: "none",
+      ...style
     },
-    style,
     ...props
   })
 );
-Button.displayName = "Button";
+Img.displayName = "Img";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  Button
+  Img
 });

license.md

@@ -8,2 +8,1 @@ Copyright 2022 Bu Kinoshita and Zeno Rocha
 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-

package.json

 {
   "name": "@react-email/img",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Display an image in your email",
@@ -19,9 +19,12 @@ "sideEffects": false,
     "test": "jest",
-    "test:watch": "jest --watch"
+    "test:watch": "jest --watch",
+    "format:check": "prettier --check \"**/*.{ts,tsx,md}\"",
+    "format": "prettier --write \"**/*.{ts,tsx,md}\""
   },
   "dependencies": {
-    "react": "^18.2.0"
+    "react": "18.2.0"
   },
   "devDependencies": {
     "@babel/preset-react": "7.18.6",
+    "@react-email/render": "*",
     "@types/react": "18.0.20",
@@ -28,0 +31,0 @@ "@types/react-dom": "18.0.6",

readme.md

@@ -1,2 +0,2 @@
-![React Email img cover](https://react-email-assets.vercel.app/img.png)
+![React Email img cover](https://react.email/static/images/readme/covers/img.png)
 
@@ -35,8 +35,6 @@ <div align="center"><strong>@react-email/img</strong></div>
 ```jsx
-import { Button } from '@react-email/img';
+import { Img } from '@react-email/img';
 
 const Email = () => {
-  return (
-    <Img src="cat.jpg" alt="Cat" width="300" height="300" />
-  );
+  return <Img src="cat.jpg" alt="Cat" width="300" height="300" />;
 };
@@ -47,11 +45,19 @@ ```
 
-| Name   | Type   | Default  | Description |
-| --     | --     | --       | --          |
-| alt    | string |          | Alternate description for an image |
-| src    | string |          | The path to the image |
-| width  | string |          | The width of an image in pixels |
-| height | string |          | The height of an image in pixels |
+| Name   | Type   | Default | Description                        |
+| ------ | ------ | ------- | ---------------------------------- |
+| alt    | string |         | Alternate description for an image |
+| src    | string |         | The path to the image              |
+| width  | string |         | The width of an image in pixels    |
+| height | string |         | The height of an image in pixels   |
 
+## Support
+
+This component was tested using the most popular email clients.
+
+| <img src="https://react.email/static/images/readme/icons/gmail.svg" width="48px" height="48px" alt="Gmail logo"> | <img src="https://react.email/static/images/readme/icons/apple-mail.svg" width="48px" height="48px" alt="Apple Mail"> | <img src="https://react.email/static/images/readme/icons/outlook.svg" width="48px" height="48px" alt="Outlook logo"> | <img src="https://react.email/static/images/readme/icons/yahoo-mail.svg" width="48px" height="48px" alt="Yahoo! Mail logo"> | <img src="https://react.email/static/images/readme/icons/hey.svg" width="48px" height="48px" alt="HEY logo"> | <img src="https://react.email/static/images/readme/icons/superhuman.svg" width="48px" height="48px" alt="Superhuman logo"> |
+| ---------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------- |
+| Gmail ✔                                                                                                          | Apple Mail ✔                                                                                                          | Outlook ✔                                                                                                            | Yahoo! Mail ✔                                                                                                               | HEY ✔                                                                                                        | Superhuman ✔                                                                                                               |
+
 ## License
 
 MIT License

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

8323

increased by34.11%

Lines of code

85

increased by16.44%

Number of lines in readme file

62

increased by10.71%

Worsened metrics

Dev dependency count

12

increased by9.09%

Dependency changes

• + Addedreact@18.2.0(transitive)

• - Removedreact@18.3.1(transitive)

• Updatedreact@18.2.0