LQIP for React

Low Quality Image Placeholder for React is a component that allows you Lazy Load images using Medium load image effects

Check this out: https://jmperezperez.com/medium-image-progressive-loading-placeholder/

Component Props

| Prop | Required | Type | Default Value | Description | Example | |-------|------------|-------|------------------|---------------|-----------| | aspectRatio | yes | string | "" | Defines the aspect ratio of your image. You should use the image dimentions in the format "WIDTHxHEIGHT" | "1280x720" | | thumbnail | yes | string | "" | The path or url to your thumbnail image | "http://www.micdn.com/cats_thumbnail.jpeg" | | src | yes | string | "" | The path or url to your image | "http://www.micdn.com/cats_.jpeg" | | lazyLoad | no | string | "image" | This prop define how will work lazy load. You should use 1 of 3 values: image - all - none. image applies lazy load only to your images (thumbnails will be loaded all at once). all applies lazy load to both, thumbnails and images. none disable lazy load. | "all" | | color | no | string | "#B9E1DC" | The color for the box where the images and thumbnails will be loaded. | "#B9E1DC" | | blur | no | number | 40 | The pixels number of blur effect in your thumbnail | 30 | | alt | no | string | "" | alt value for your image | "something" |