adeyahya / bored-image

React Image Component using Placeholder

Bored Image

Bored Image is a JavaScript module that can be used to replace <img/> element cause it integrated with lazy-load uisng IntersectionObserver and using color & blurry placeholder that has same dimension as original source. It will be usefull for user that has slow internet connection to reduce expand effect when the original source has resolved.

DEMO

Installation

npm install bored-image --save

Usage

import BoredImage from 'bored-image'

function App() {
  return (
    <div>
      <BoredImage
        src={ /* source */ }
        placeholder={ /* placeholder */ }
        color={ /* color placeholder ex: #333 */ }
        width={ /* naturalWidth */ }
        height={ /* naturalHiehgt */ }
        alt={ /* alt */ }/>
    </div>
  )
}