Merge pull request #60 from lvlsgroup/add-components-fluid-image

prevent page jumps with fluid image component

Author: oskarleonard

package.json

@@ -5,7 +5,7 @@
   "name": "react-component-lib",
   "author": "lvlsgroup",
   "description": "A component library for react",
-  "version": "0.9.34",
+  "version": "0.9.35",
   "main": "src/server/server.js",
   "license": "MIT",
   "scripts": {

src/client/components/images/fluidImage/FluidImage.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import styles from './fluidImage.scss';
+
+function FluidImage({
+  src,
+  classNameContainer,
+  classNameImage,
+  aspectRatio,
+  srcSet,
+  sizes,
+  alt,
+}) {
+  const paddingBottomPercentage = `${(1 / aspectRatio) * 100}%`;
+
+  return (
+    <div
+      className={classNames(styles.fluidImageContainer, classNameContainer)}
+      style={{ paddingBottom: paddingBottomPercentage }}
+    >
+      <img
+        src={src}
+        className={classNames(styles.fluidImage, classNameImage)}
+        alt={alt}
+        srcSet={srcSet}
+        sizes={sizes}
+      />
+    </div>
+  );
+}
+
+FluidImage.propTypes = {
+  src: PropTypes.string,
+  classNameContainer: PropTypes.string,
+  classNameImage: PropTypes.string,
+  alt: PropTypes.string,
+  aspectRatio: PropTypes.number, // Use this instead of height and width
+  srcSet: PropTypes.string,
+  sizes: PropTypes.string,
+};
+
+export default FluidImage;

src/client/components/images/fluidImage/fluidImage.scss

@@ -0,0 +1,8 @@
+.fluidImageContainer {
+  position: relative;
+
+  .fluidImage {
+    width: 100%;
+    position: absolute;
+  }
+}

src/client/components/images/fluidImage/fluidImageDemo/FluidImageDemo.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import FluidImage from '@rc-lib-client/components/images/fluidImage/FluidImage';
+
+function FluidImageDemo() {
+  return (
+    <FluidImage
+      src="https://storage.googleapis.com/acamp-prod/images/landing-pages/camper_2.1.svg"
+      aspectRatio={344 / 154}
+    />
+  );
+}
+
+export { FluidImageDemo };

src/client/components/images/image/Image.js

@@ -4,14 +4,26 @@ import PropTypes from 'prop-types';
 
 class Image extends PureComponent {
   render() {
-    const { className, src, alt, height, width, ...rest } = this.props;
+    const {
+      className,
+      src,
+      alt,
+      height,
+      width,
+      srcSet,
+      sizes,
+      ...rest
+    } = this.props;
+
     return (
       <img
         className={classNames(className)}
         src={src}
         height={height}
         width={width}
         alt={alt}
+        srcSet={srcSet}
+        sizes={sizes}
         {...rest}
       />
     );
@@ -24,6 +36,8 @@ Image.propTypes = {
   alt: PropTypes.string,
   height: PropTypes.string,
   width: PropTypes.string,
+  srcSet: PropTypes.string,
+  sizes: PropTypes.string,
 };
 
 export default Image;