react-smartpicture v1.0.2

react-smartpicture

Crop images with a focuspoint for reactJs.

Features

• Automatically resizes and centers an images to fit in a container
• Uses coordinates to ensure a part of an image is always shown (like a face)
• Reacts on src changes and changes in size of the container (not screen resizes)
• Offers callback when images is loaded and resized
• Works with picture element for media optimized sources
• No jQuery required

How it works

SmartPicture creates a container div and puts an image or picture (depending on sources are used) inside it.

The prop "containerClassName" specifies the className of the container div where the dimensions should be written.

Examples

The examples use an image-container css class which might look like:

.image-container {
    width: 300px;
    height: 100px; 
}

Basic Example

import SmartPicture from 'react-smartpicture';

...

<SmartPicture
    src="/path/to/my/image.jpg"
    containerClassName="image-container"
    alt="my image"
    focus={{x: 0.8, y: 0.3}} />
        

Full example with callback

import SmartPicture from 'react-smartpicture';

constructor(props) {
    super(props);
    
    ...
    
    this.sources = [
        {   
            media: "min-width: 640px",
            srcSet: "/myimage-large.jpg 1x, /myimage-large@2x.jpg 2x"
        },
        {   
            media: "min-width: 320px",
            srcSet: "/myimage-small.jpg 1x, /myimage-small@2x.jpg 2x"
        }
    ];
}
 
 ...
 
 function onResize(el) {
    console.log("image is ready", el);
 }
 
 ...
 
 <SmartPicture
         src="/path/to/my/image.jpg"
         sources={this.sources}
         containerClassName="image-container"
         alt="my image"
         id="myImageContainer"
         pivotToCenter={true}
         position="absolute"
         onResize={this.onResize.bind(this)}
         focus={{x: 0.5, y: -0.5}} />
         
         

Properties