Image react component

Image.js

/**
 * Image Component
 */

/*
// Usage example
<Image
  alt='example'
  className='additional-className'
  src='example-small.png',
  srcSet={{
    '360w': 'example-small.png',
    '720w': 'example-middle.png',
    '1200w': 'example-large.png',
  }},
  sizes={[
    {size: '100vw', mediaCondition: '(max-width: 30em)'},
    {size: '50vw', mediaCondition: '(max-width: 50em)'},
    {size: 'calc(33vw - 100px)'},
  ]},
/>
*/

import React from 'react';
import PropTypes from 'prop-types';

const Image = ({ src, alt, srcSet, sizes, ...otherProps }) => {
  const buildSrcSet = () =>
    Object.keys(srcSet)
      .map(descriptor => `${srcSet[descriptor]} ${descriptor}`)
      .join(',') || undefined;

  const buildSizes = () => {
    if (sizes) {
      return (
        sizes
          .map(size => {
            if (size.media) {
              return `${size.media} ${size.size}`;
            }
            return `${size.size}`;
          })
          .join(',') || undefined
      );
    }
    return undefined;
  };

  return (
    <img
      src={src}
      srcSet={buildSrcSet()}
      sizes={buildSizes()}
      alt={alt}
      {...otherProps}
    />
  );
};

Image.defaultProps = {
  srcSet: {},
  size: []
};

Image.propTypes = {
  src: PropTypes.string.isRequired,
  alt: PropTypes.string.isRequired,
  srcSet: PropTypes.object,
  size: PropTypes.arrayOf(
    PropTypes.shape({
      size: PropTypes.string,
      media: PropTypes.string
    })
  )
};

export default Image;