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

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%;) |

You can automate the image compression process using ImageMagick 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