Skip to content

KRRISH96/render-smooth-image-react

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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.

About

A React Image Component to Render Images Smoothly.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •