diff --git a/README.md b/README.md index 8b2c74f..08d528f 100644 --- a/README.md +++ b/README.md @@ -130,7 +130,21 @@ 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. + +`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 { + width: auto !important; + } +`; + + + + +``` ## Head CSS and Media Queries You can pass a string prop `headCSS` to your `` component. You can see it in our [kitchenSink.js](https://github.com/chromakode/react-html-email/blob/master/examples/kitchenSink.js) example. 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) })