An image that is responsive to its width on the screen Works with retina displays

yarn add react-image-responsive

import ReactDOM from 'react-dom';
import ImageResponsive from 'react-image-responsive';

const sources = [
  { maxWidth: 100, src: 'http://placehold.it/100x100' },
  { maxWidth: 200, src: 'http://placehold.it/200x100' },
  { maxWidth: 400, src: 'http://placehold.it/400x100' },
  { maxWidth: 800, src: 'http://placehold.it/800x100' },
  { maxWidth: 1200, src: 'http://placehold.it/1200x100' }
];

ReactDOM.render(
  <div className="App">
    <figure>
      <ImageResponsive
        src="http://placehold.it/50x50"
        alt="this is my image"
        width="100px"
        height="100px"
        sources={sources}
      />
      <figcaption>
        This image has a fixed width of 100px, you should see a 100px image
      </figcaption>
    </figure>
    <figure>
      <ImageResponsive
        src="http://placehold.it/50x50"
        alt="this is my image"
        width="105px"
        height="100px"
        sources={sources}
      />
      <figcaption>
        This image has a fixed width of 105px, you should see a 200px image
      </figcaption>
    </figure>

    <figure>
      <ImageResponsive
        src="http://placehold.it/50x50"
        alt="this is my image"
        width="400px"
        height="100px"
        sources={sources}
      />
      <figcaption>
        This image has a fixed width of 400px, you should see a 400px image
      </figcaption>
    </figure>
    <figure>
      <ImageResponsive
        src="http://placehold.it/50x50"
        alt="this is my image"
        width="20%"
        height="100px"
        sources={sources}
      />
      <figcaption>
        This image has a 20% width, resize your browser to see the src adjusting
      </figcaption>
    </figure>
    <figure>
      <ImageResponsive
        src="http://placehold.it/50x50"
        alt="this is my image"
        width="50%"
        height="100px"
        sources={sources}
      />
      <figcaption>
        This image has a 50% width, resize your browser to see the src adjusting
      </figcaption>
    </figure>
  </div>,
  document.getElementById('root')
);