Skip to content

KRRISH96/render-smooth-image-react

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

68 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

render-smooth-image-react

NPM npm (custom registry) npm Open Source Love

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.

RenderSmoothImageDemo

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.