react-image-selector

A responsive image selector for React

Usage no npm install needed!

<script type="module">
  import reactImageSelector from 'https://cdn.skypack.dev/react-image-selector';
</script>

README

react-image-selector

This is a React component that wraps the imageSelector. It takes a set of cuts of images and fills in the src attribute of an image based on the size of the image.

Basic Usage

The Image component creates an <img>. The Cuts component never render, they hold data about the different cuts of the image.

import { Image, Cut } from 'react-image-selector';

export default MyImage extends React.Component {
    render () {
        return (<Image responsive={true}>
            <Cut
                width={200}
                height={400}
                src="/path/to/image.jpg"
                at2x="/path/to/retina/image.jpg"
            />
            <Cut
                width={400}
                height={800}
                src="/path/to/image.jpg"
                at2x="/path/to/retina/image.jpg"
            />
        </Image>)
    }
}