rt-image

React-Image

basic image preview component with headers

Usage

npm install rt-image
 
# yarn add rt-image 

examples

import React, { useEffect, useState } from 'react';
import ReactDOM from 'react-dom';
 
import Image from 'rt-image';
 
const images = [
  'https://image.shutterstock.com/image-photo/white-transparent-leaf-on-mirror-260nw-1029171697.jpg',
  'https://images.pexels.com/users/avatars/454176/naturally-beautiful-inspiration-893.jpeg?w=256&h=256&fit=crop&crop=faces&auto=compress',
  'https://images.pexels.com/photos/1133957/pexels-photo-1133957.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
  'https://images.pexels.com/photos/556666/pexels-photo-556666.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
];
 
const App = () => {
  const [src, setSrc] = useState(images[0]);
  useEffect(() => { setTimeout(() => setSrc(images[1])); }, [src]);
 
  return (
    <div className="App">
      <Image style={{ marginRight: '5px' }} src={src} errorMessage="some thing bad happen" />
      <Image style={{ marginRight: '5px' }} src={images[2]} errorMessage="load image error" />
      <Image src={images[3]} />
    </div>
  );
};
 
ReactDOM.render(<App />, document.getElementById('root'));

request image width headers

<Image src="https://xxx.images.com/11111" headers={{ Authorization: 'xxx' }} />

custom image loader

<Image src="https://xxx.images.com/11111" loader={() => <div>loading...</div>} />

custom error displayer

<Image src="https://xxx.images.com/11111" renderError={() => <div>some error happens</div>} />

Properties

	type	description	required
src	string	image url	true
width	number	image component width	false
height	number	image component height, default same with width	false
className	string	custom className to image component	false
style	React.CSSProperties	styles	false
description	string	used as image alt currently	false
errorMessage	string	custom error message	false
headers	object	request headers	false
loader	() => React.ReactNode / null	custom image loader	false
renderError	() => React.ReactNode / null	custom error displayer	false

License

MIT © Rynxiao/react-image