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.

krrish96 / render-smooth-image-react Goto Github PK

render-smooth-image-react's Introduction

render-smooth-image-react

In Action

Install

Usage

Note

Props

Classes

HTML structure

Request / Bug Report

render-smooth-image-react's People

Contributors

Stargazers

Watchers

Forkers

render-smooth-image-react's Issues

Recommend Projects

Recommend Topics

Recommend Org