Reimage

Reimage is a react library for comfortable working with images and improvement of user experience. Basically Reimage is all you need, because it supports all default image attributes, and provides many new useful features such as:

• Image lazy loading,
• Customizable visibility threshold,
• Handling broken images,
• Fallback components, and spinners support image loading,
• Styling and customization,

Reimage also can be used in third-party sliders, galleries etc.

Caution: Intersection observer API used in Reimage check if your target browsers support it

Installation

1. To install Reimage use:

npm

npm install reimage --save

yarn

yarn add reimage

Documentation

To use Reimage in your project:

import Reimage from 'reimage';

or

const Reimage = require('reimage');

Example:

import React from 'react'
import Reimage from 'reimage';

export default function Example() {
  return (
    <Reimage
    src={url}
    width={400}
    height={500}
    alt="oops"
    classNames="ClassName1, ClassName2, ClassNameN"
  />
  )
}
  

Demo

Live demo available here

Cookbook

Blurred image loading

To have a blurred image placeholder when loading, you have to pass the image to the minifiedSrc prop. For better UX use minified low-quality copies of the original image.

import React from 'react'
import Reimage from 'reimage';
import * as minifiedImage from './path/to/minified;' // importing minified image

export default function Blurred() {
  return (
    <Reimage
    crossOrigin='anonymous'
    src={src}                          // can be URL or imported image
    width={400}
    height={500}
    minifiedSrc={minifiedTest}         // pass minifiedImage to component            
    alt="oops"
    classNames="ClassName1, ClassName2, ClassNameN"
    wrapper="div"
    wrapperClass="customWrapperClassName"
  />
  )
}
  

Colored backdrop on image loading

To have a coloured backdrop on the load you just have to specify color you want in prop backDropColor.

import React from 'react'
import Reimage from 'reimage';

export default function BackdropColored() {
  return (
    <Reimage
    crossOrigin='anonymous'
    src={src}
    width={400}
    height={500}
    alt="oops"
    classNames="ClassName1, ClassName2, ClassNameN"
    wrapper="div"
    wrapperClass="customWrapperClassName"
    backDropColor='#e3e3e3'      
  />
  )
}
  

Handling error on image loading

If your image is not loaded for some reason you can handle this in several ways:

1. Specify errorImage and show image,

2. Specify altAsError and show text from the alt attribute as an error in the image container.

Note: Don`t choose two error-handling methods at the same time. errorImage have more priority then ```altAsError```, so when checked both showed will be only ```errorImage```.

import React from 'react'
import Reimage from 'reimage';
import * as errorImage from './path/to/error;'

export default function HandleErrors() {
  return (
    <Reimage
    crossOrigin='anonymous'
    src={src}
    width={400}
    height={500}
    alt="oops"
    classNames="ClassName1, ClassName2, ClassNameN"
    wrapper="div"
    wrapperClass="customWrapperClassName"
    errorImage={errorImage}                               (1)
    altAsError={true}                                     (2)
  />
  )
}
  

Loading image with fallback

To add fallback to your image just specify prop fallbackComponent and optionally provide styles for it with fallBackWrapperStyles.

import React from 'react'
import Reimage from 'reimage';
import * as originalImage from './path/to/original;'

export default function BackdropColored() {
  return (
    <Reimage
    crossOrigin='anonymous'
    src={src}
    width={400}
    height={500}
    alt="oops"
    classNames="ClassName1, ClassName2, ClassNameN"
    wrapper="div"
    wrapperClass="customWrapperClassName"
    fallbackComponent={<Spinner />}
    fallBackWrapperStyles={{ position: 'absolute', zIndex: 2, left: '15%', top: '15%' }}
  />
  )
}
  

Props list

Prop name	Type	Details
src	string or base64Image	REQUIRED prop, specifies source of image.
classNames	string	String of provided class names (best separated with space).
minifiedSrc	string or base64Image	Source of minified image.
fallbackComponent	DOM element or ReactNode	Fallback showed when image loading.
fallBackWrapperStyles	Object	Styles for fallbackComponent wrapper.
backDropColor	String	Specifies backDrop color.
backDropStyles	Object	Specifies backDrop styles.
wrapper	string specified	Creates inner wrapper for image, has 3 possible values: div, span, p.
wrapperClass	string	Add provided className to wrapper.
errorImage	string or base64Image	Specifies the image shown if the image provided in src is not loaded.
altAsError	boolean	Show alt text as an error in the image container.
grayscale	boolean	Make image black and white colored.
root	string	Specified element that is used as the viewport for checking visibility of the target.
rootMargin	string	Margin around the root. similar to css "10px 10px 10px 10px". Used to create a gap before loading image
threshold	number	Can be number or percentage defines how many roots should be shown before starting loading image.

In addition to provided props you can use default image attributes such as alt, crossOrigin etc.

Features in next releases

• Main image color backDrop,
• Gradient backDrop,
• New styling,

Dependencies

Reimage has no external dependencies.

Issues

Please feel free to report issues, improvements and new features

License

Reimage is available under the MIT License