react-loading-image

A react image loader component

Installation

$ npm install --save react-loading-image

Usage

class Demo extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      value: null
    };
  }

  onChange = (e) => {
    this.setState({
      value: e.target.value
    });
  }

  render() {
    const {value} = this.state;
    return (
      <div>
        <h1>Copy a image URL here</h1>
        <input onChange={this.onChange}/>
        <p>
          value: {value}
        </p>
        <div>
          {value && (
            <ImageLoader
              src={value}
              loading={() => <div>Loading...</div>}
              error={() => <div>Error</div>}
              />
          )}
        </div>
      </div>
    );
  }
}

Advanced

You might want to customized such as <div/> as your final view, instead of <img/> tags, you can use image prop to replace any React element as you wish!

For example, using styled-components:

import styled from 'styled-components';

const PreviewImg = styled.div`
  background-image: url(${props => props.src});
  width: 100%;
  height: 300px;
  background-size: contain;
  background-repeat: no-repeat;
`;

class Demo extends React.Component {
  ...

  render() {
    const {value} = this.props;
    return (
      <div>
        <ImageLoader
          src={value}
          image={props => <PreviewImg {...props}/>} // change to your customized component
          loading={() => <div>Loading...</div>}
          error={() => <div>Error</div>}
          />
      </div>
    );
  }
}

Props

| Name | Type | Default | Description | | ------------ | ------- | ------- | ----------- | | src | string | null | Image URL | | style | style Object | null | Pass style object to set image's style | | className | string | null | Set image's className | | onLoad | (img: Image) => void | null | This function will be called when image is loaded | | onError | (err: Event) => void | null | This function will be called when image is failed | | loading | () => React.Element<> | null | Return a React element that will show when image is loading | | error | () => React.Element<> | null | Return a React element that will show when image is crashed | | image | ({src: string, width: number, height: number}) => React.Element<*> | null | Final result will render to this customized React element, if you don't assign this props default image will render into <img src={src} width={width} height={height}/> |

Start example server

npm start

generate demo

npm run gh-pages

License

MIT © chilijung