render-img

1.1.3 • Public • Published

Image Loader Component For React

React Component for image placeholder and lazy loading.


Features

  • Show placeholder before actual image load

  • Show fallback image when actual image failed to load

  • Image lazyloading

  • optional blur effect

  • optional background placeholder color

  • custom loader component


Usage

import {ImageLoader} from 'render-img'

<ImageLoader
  src,                                  // * required
  placeHolderSrc,
  errorSrc,
  alt,
  threshold = 100,
  width = 0,                            // Intrinsic width of image
  height = 0,                           // Intrinsic height of image
  blurOverLayColor = "#b4b4b4",
  blurStrength = "sm",                  // options : sm/md/lg
  isUseblur = false,                    // to use blur effect or not
  loader = null,                        // custom loader component
  containerClass = "",                  // custom class for container div
  containerStyle = {},                  // custom css for container div
  imageClass = "",                      // custom class for image component
  imageStyle = {},                      // custom css for image component
/>

Made with ❤️ by - kaung htet

Package Sidebar

Install

npm i render-img

Weekly Downloads

16

Version

1.1.3

License

MIT

Unpacked Size

8.26 kB

Total Files

4

Last publish

Collaborators

  • mg-kh