render-smooth-image-react

A React component to render images smoothly.

In Action

The left side one is default rendering of an image in DOM, The right one uses render-smooth-image-react.

Install

Using npm

npm i render-smooth-image-react

or Using yarn

yarn add render-smooth-image-react

Usage

import React from 'react';
import RenderSmoothImage from 'render-smooth-image-react';
import 'render-smooth-image-react/build/style.css';

const Image = () => (
  <div style={{ width: 300, height: 300 }}>
    <RenderSmoothImage src={'your-image-source'} alt="alternate-text" />
  </div>
);

export default Image;

Note

RenderSmoothImage will occupy full width and height of its parent component.

So, To control width/height set a parent div with desired dimensions.

Props

| Property | Description | Default | | ----------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ | | src (*required) | Image source link or path to image |   | | alt | Alternate text to display when src failed. | not found | | objectFit | Sets the object-fit property in css (helps determining how the content should be resized to fit its container). Valid options contain, fill, cover, none, scale-down. Learn more | contain | | onLoad | Callback for onLoad event on image. | () => null | | onError | Callback for onError event on image.. | () => null | | wrapperProps | Any additional props to be added on root div. | {} | | imageProps | Any additional props to be added on img element. | {} |

Classes

| ClassName | Description | | ------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | | smooth-image-wrapper | Class added to root element. | | smooth-image | Class added to img tag. | | image-hidden, image-visible | For img tag, Class image-hidden is added while image is being downloaded and will be replaced with image-visible once image is ready to render. | | smooth-no-image | Class added for element rendering alt text. (img tag is replaced with a div with alt text for invalid src or when image is not found at given src). |

HTML structure

For Valid Image Source.

<div class="smooth-image-wrapper">
  <img src="your-image-source" class="smooth-image image-visible" />
</div>

For Invalid Image Source, rendering alternate text.

<div class="smooth-image-wrapper">
  <div class="smooth-no-image">"Your alternate text."</div>
</div>

For Loader

<div class="smooth-image-wrapper">
  <div className="smooth-preloader">
    <span className="loader" />
  </div>
</div>

Request / Bug Report

If you have any issues or have any suggestions, Please feel free to open an issue here.