https://github.com/sottar/react-image-resizer

react-image-resizer is a React component that resizes the image to be nice.
https://github.com/sottar/react-image-resizer

image javascript react react-components

Last synced: about 1 year ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/sottar/react-image-resizer
• Owner: sottar
• License: mit
• Created: 2017-05-16T00:40:26.000Z (about 9 years ago)
• Default Branch: master
• Last Pushed: 2025-06-11T21:42:53.000Z (about 1 year ago)
• Last Synced: 2025-06-11T22:42:27.943Z (about 1 year ago)
• Topics: image, javascript, react, react-components
• Language: JavaScript
• Homepage:
• Size: 494 KB
• Stars: 32
• Watchers: 2
• Forks: 6
• Open Issues: 24
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# react-image-resizer

[![Build Status](https://travis-ci.org/sottar/react-image-resizer.svg?branch=master)](https://travis-ci.org/sottar/react-image-resizer)

[![npm version](https://badge.fury.io/js/react-image-resizer.svg)](https://badge.fury.io/js/react-image-resizer)

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

## Installation

```sh

# use npm

$ npm install -D react-image-resizer

# use yarn

$ yarn add -D react-image-resizer

```

## Usage

```javascript

import React from 'react';

import Image from 'react-image-resizer';

class App extends React.Component {

  render() {

    return (

      


        

      

    );

  }

}

```


## Examples

``` javascript

const style = {

  image: {

    border: '1px solid #ccc',

    background: '#fefefe',

  },

};

```

Horizontally long case | Vertically long case | disable image

:---:|:---:|:---:

![Horizontally](example-images/horizontally.png) | ![Vertically](example-images/vertically.png) | ![noimage](example-images/noimage.png)

## 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

## License

[MIT](https://github.com/sottar/react-image-resizer/blob/master/LICENSE)