From d5a0d504f86fe2880ead861ba2caf215ed9778e4 Mon Sep 17 00:00:00 2001 From: Roilan Date: Mon, 2 May 2016 17:21:21 -0400 Subject: [PATCH 1/2] optional width / height on image and doc update --- README.md | 15 ++++++++++++++- examples/kitchenSink.js | 2 +- src/components/Image.js | 9 +++++++-- test/renderEmail-test.js | 2 +- 4 files changed, 23 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index a9e399e..410d4a6 100644 --- a/README.md +++ b/README.md @@ -130,7 +130,20 @@ Use to format links. Requires an `href` prop. Always sets `target="_blank"` and ### `` -An image, without any pesky borders, outlines, or underlines by default. Requires a `src` prop, and `width` and `height` to be set. You can override the default styles (such as adding a border) using the `style` prop. +An image, without any pesky borders, outlines, or underlines by default. Requires a `src` prop. Optional `width` and `height` props are available. You can override the default styles (such as adding a border) using the `style` prop. +Note: `height` and `width` props default to `1px`. If you need to have a response image, for example, having 300px of height and `auto` width. We recommend adding the number of pixels directly as a prop and having `auto` as a CSS prop. + +```js +const css = ` + img { + width: auto !important; + } +`; + + + + +``` ## License diff --git a/examples/kitchenSink.js b/examples/kitchenSink.js index 06e0aaa..73b45dd 100644 --- a/examples/kitchenSink.js +++ b/examples/kitchenSink.js @@ -16,7 +16,7 @@ const email = ( Generated by react-html-email - react + react diff --git a/src/components/Image.js b/src/components/Image.js index 663218d..54025b0 100644 --- a/src/components/Image.js +++ b/src/components/Image.js @@ -17,7 +17,12 @@ export default function Image(props) { Image.propTypes = { alt: PropTypes.string.isRequired, src: PropTypes.string.isRequired, - width: PropTypes.number.isRequired, - height: PropTypes.number.isRequired, + width: PropTypes.number, + height: PropTypes.number, style: EmailPropTypes.style, } + +Image.defaultProps = { + height: 1, + width: 1, +} diff --git a/test/renderEmail-test.js b/test/renderEmail-test.js index 9d9d87a..0c90706 100644 --- a/test/renderEmail-test.js +++ b/test/renderEmail-test.js @@ -12,7 +12,7 @@ describe('renderEmail', () => { it('produces expected output from a kitchen sink example', () => { const actualOutput = renderEmail(kitchenSink) - const expectedOutput = 'Test Email
Hello, world!
Generated by react-html-emailreact
' + const expectedOutput = 'Test Email
Hello, world!
Generated by react-html-emailreact
' expect(actualOutput).toBe(expectedOutput) }) From 9a4e362bac75f5e4925ee3fe82385d214abc3974 Mon Sep 17 00:00:00 2001 From: Roilan Date: Mon, 2 May 2016 17:25:51 -0400 Subject: [PATCH 2/2] doc updates --- README.md | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 410d4a6..261c704 100644 --- a/README.md +++ b/README.md @@ -131,13 +131,14 @@ Use to format links. Requires an `href` prop. Always sets `target="_blank"` and ### `` An image, without any pesky borders, outlines, or underlines by default. Requires a `src` prop. Optional `width` and `height` props are available. You can override the default styles (such as adding a border) using the `style` prop. -Note: `height` and `width` props default to `1px`. If you need to have a response image, for example, having 300px of height and `auto` width. We recommend adding the number of pixels directly as a prop and having `auto` as a CSS prop. + +`height` and `width` props default to `1px`. If you require a response image, for example, having `300px` of height and `auto` width. We recommend adding the number of pixels directly as a prop and having `auto` in your `headCSS`. ```js const css = ` - img { + img { width: auto !important; - } + } `;