render-smooth-image-react v1.0.3

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

Classes

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.