react-imgr

A Progressive Image component for React.

Installation

// with npm with react-extensions
$ npm install react-extensions

// with npm with react-compounds
$ npm install @react-compounds/image  --save

// with yarn with react-compounds
$ yarn add @react-compounds/image

// with npm
$ npm install react-imgr  --save

// with yarn
$ yarn add react-imgr

Usage

This is the basic usage of react-dropdown

import Image from 'react-imgr';
import 'react-imgr/dist/styles.min.css'

<Image
    src='image.jpg'
    preloadSrc='preloadimage.jpg'
    containerStyle={{
	width: '100%',
	height: '280px'
    }}
    initialBlur
    alt='alt tag added here'
    scale
    placeholder='placeholder.jpg'
/>

Props

Name	Type	Required	Description
src	string	true	the src of image
preloadSrc	string	false	the src image preload src
containerStyle	object	false	container css styles
initialBlur	boolean	true	the src initial state
alt	string	true	the src alt tag
scale	boolean	false	scale the src image
placeholder	string	true	the src of the placeholder image

Demo

codesandbox.io

anishmprasad.com

anishmprasad.github.io

TODO

• [x] Optimization
• [x] CSS Polishing and Transitions
• [x] Documentation
• [x] Production Ready

License

Apache 2.0