react-remote-image
Image component with declarative state control. Just like Relay.
Installation
npm install react-remote-image --save
Usage
import React from 'react' import ReactDOM from 'react-dom' import RemoteImage from 'react-remote-image' ReactDOM.render( <RemoteImage src="http://funpeep.com/wp-content/uploads/2014/04/cute-cat-cats-hd-wallpaper.jpg" renderLoading={() => ( <div className="image--loading"> Loading... </div> )} alt="Meow meow cat" />, document.getElementById('app') );
Advanced usage
import React from 'react' import ReactDOM from 'react-dom' import RemoteImage from 'react-remote-image' import Spinner from 'react-spinkit' ReactDOM.render( <RemoteImage src="http://funpeep.com/wp-content/uploads/2014/04/cute-cat-cats-hd-wallpaper.jpg" renderLoading={() => ( <Spinner spinnerName='circle'/> )} renderFetched={(src, image) => { <div className="image-container"> <img src={src} width="300" /> <span className="image__info"> {image.naturalWidth + 'x' + image.naturalHeight} </span> </div> }} renderFailure={(error, retry) => ( <span className="error"> Failed to load image: {error.message}. <button onClick={retry}> Retry </button> </span> )} alt="Meow meow cat" />, document.getElementById('app') )
Fading
.image { opacity: 0; transition: 0.3s; } .image--loaded { opacity: 1; }
import React, { Component } from 'react' import RemoteImage from 'react-remote-image' class CatView extends Component { constructor(props, context) { super(props, context) this.state = { isLoaded: false, } } render() { const { isLoaded } = this.state const imageClass = isLoaded ? 'image image-loaded' : 'image' return ( <RemoteImage src="http://funpeep.com/wp-content/uploads/2014/04/cute-cat-cats-hd-wallpaper.jpg" renderLoading={() => ( <div className="image--loading"> Loading... </div> )} renderFetched={({ src }) => ( <img src={src} className={imageClass} /> )} onLoad={() => this.setState({ isLoaded: true, })} alt="Meow meow cat" /> ) } }