Declarative state control for Image component. Just like Relay.
JavaScript HTML
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
example
lib
src
.babelrc
.editorconfig
.gitignore
.npmignore
.travis.yml
README.md
package-lock.json
package.json
styleguide.config.js
webpack.config.dist.js

README.md

react-remote-image

Image component with declarative state control. Just like Relay.

react-remote-image-view

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"
        />
    )
  }
}