React-image-resizer NPM

react-image-resizer

react-image-resizer is a React component that resizes the image to be nice.

Installation

# use npm
$ npm install -D react-image-resizer

# use yarn
$ yarn add -D react-image-resizer

Usage

import React from 'react';
import Image from 'react-image-resizer';

class App extends React.Component {
  render() {
    return (
      <div>
        <Image
          src="path/to/image.jpg"
          height={ /*resize height*/ }
          width={ /*resize width*/ }
        />
      </div>
    );
  }
}

Examples

<Image
  src="path/to/image.jpg"
  width={240}
  height={240}
  style={style.image}
/>
const style = {
  image: {
    border: '1px solid #ccc',
    background: '#fefefe',
  },
};

Horizontally long case	Vertically long case	disable image

Options

name	required	type	default	description
src	true	String		Path to your image
alt	false	String		Image description
height	true	Number	0	Height after resize (px only)
width	true	Number	0	Width after resize (px only)
style	false	object		Wrapper style of image
noImageSrc	false	String		Path when image could not be acquired
noImageAlt	false	String	'noimage'	description when image could not be acquired