# react-dynamic-image

> A lightweight component for cleanly and dynamically rendering srcSet images in react

Latest version **1.3.2** (published 2019-10-01) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-dynamic-image
pnpm add react-dynamic-image
yarn add react-dynamic-image
bun add react-dynamic-image
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.3.2 |
| Published | 2019-10-01 |
| First published | 2019-08-14 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 14.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | R. Spencer Fink |
| Maintainers | rspencerfink |
| Keywords | react, image, srcSet, dynamic, responsive |

## Links

- npm: https://www.npmjs.com/package/react-dynamic-image
- Repository: https://github.com/RSpencerFink/react-dynamic-image
- Homepage: https://github.com/RSpencerFink/react-dynamic-image#readme
- Issues: https://github.com/RSpencerFink/react-dynamic-image/issues
- npm.io page: https://npm.io/package/react-dynamic-image

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.3.2 (latest) — 2019-10-01
- 1.3.1 — 2019-09-30
- 1.3.0 — 2019-09-30
- 1.2.4 — 2019-09-30
- 1.2.3 — 2019-09-30
- 1.2.2 — 2019-09-30
- 1.2.1 — 2019-09-30
- 1.2.0 — 2019-09-30
- 1.1.5 — 2019-09-29
- 1.1.4 — 2019-09-29
- 1.1.3 — 2019-09-29
- 1.1.2 — 2019-09-29
- 1.1.1 — 2019-09-29
- 1.1.0 — 2019-09-29
- 1.0.2 — 2019-08-14
- … 2 more at https://npm.io/package/react-dynamic-image/versions

## README

# react-dynamic-image

A lightweight component for cleanly rendering srcSet images in react

`npm install --save react-dynamic-image`

Improve your website's loadtimes by using **DynamicImage**

To Start:

`import DynamicImage from 'react-dynamic-image'`

Place compressed images in same folder as original and name to these conventions.

**ImageName_ImageWidth.ext**

_default image widths are [400, 600, 800, 1100, 1500, 2000, 2500]px, but can be changed using the **imageWidths** prop and passing an array of integers_

![example file structure](https://i.imgur.com/GzCo7gO.png)

Include in jsx in place of image

```
<DynamicImage
    srcProp="/images/example.ext"
    altProp="example image"
/>
```

**Props**

| Prop Name   | Type - Description                                                                  |
| ----------- | ----------------------------------------------------------------------------------- |
| srcProp     | String (**Required**) - Path to images                                              |
| altProp     | String (**Required**) - Alt Text                                                    |
| classProp   | String - Optional Classname                                                         |
| onClickProp | Function - Optional onClick callback                                                |
| refProp     | Ref - Optional Ref                                                                  |
| imageWidths | Array - Optional Array of integers for custom image widths (replaces default array) |
| ariaHidden  | Boolean - Optional Hide from Accessibility software                                 |
| noStyles    | Boolean - Optionally disable default styles (max-height: 100%;, max-width: 100%;)   |

<!-- | isPublic    | Boolean - Set true if images are located in the `public` folder                     | -->

You can automate the image compression process using [ImageMagick](https://www.imagemagick.org/script/download.php) and adding these scripts to your `.bashrc` file

```
# Resize Multiple JPG's (Requires Filename as Argument)
# Resize Single JPG's = Provide Width as Second Argument

resizeJPG() {
  FILE_NAME=$1
  SIZES="400 600 800 1100 1500 2000 2500"
  BASE="${FILE_NAME%.*}"

  if [ "$#" -ne 2 ]
  then
    echo "Resizing Multiple Sized JPG's"
    for SIZE in $SIZES
    do
      NEW_FILE="${BASE}_${SIZE}.jpg"
      convert $1 -sampling-factor 4:2:0 -strip -resize $SIZE -quality 70 $NEW_FILE
      echo "Filename: $NEW_FILE, Width: $SIZE pixels"
    done
  else
    echo "Resizing Single Sized JPG"
    NEW_FILE="${BASE}_$2.jpg"
    convert $1 -sampling-factor 4:2:0 -strip -resize $2 -quality 70 $NEW_FILE
    echo "Filename: $NEW_FILE, Width: $2"
  fi
}

# Resize All JPG's = No Arguments

resizeALL(){
  for file in *.jpg; do
    if [ -f "$file" ]; then
        resizeJPG $file;
    fi
  done
}
```

Enjoy!

**To Do:**

- [x] Add support for filetypes beyond .jpg
- [ ] Add support for images in the src folder
- [ ] Add more event listener support

---
_Source: https://npm.io/package/react-dynamic-image · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._