React Image Designer

Features

- Can be background-image, or src. Just specify they base element tag in props.

- Loads only if visible in window.

- Support for srcset and sizes.

- Placeholder present until src image is loaded (blank by default)

- Can set custom timeout to delay src image load

background

this project is influenced heavily by react-progressive-image. However, it appears they are no longer making updates to it (at least not new features), and I needed something similar that had options to generate background-images, use dynamic base element types, and handle children. I also prefer a simplified syntax.

Install

yarn

1$ yarn add react-image-designer

npm

1$ npm install react-image-designer

The UMD build is also available on unpkg:

1<script src="https://unpkg.com/react-image-designer/umd/react-image-designer.min.js"></script>

If you use the UMD build you can find the library on window.__RID.

Props

Name	Type	Required	Description	Default
src	string	true	source of main image	required - no default
placeholder	string	false	source of placeholder images	""
style	obj	false	inline styles for component	{}
className	string	false	class for the base element	""
id	string	false	id for the base element	""
contain	boolean	false	if background-size is 'contain' (else 'cover')	false
repeat	boolean	false	if image repeats (background images only)	false
position	string	false	background-position style string	browser default
children	React Children	false	any string, html, or react element to embed	""
alt	string	false	string for alt attribute if img tag	src
tag	string	false	html element type for img (e.g. - img, div, figure etc.)	"img"
srcset	string	false	srcset	""
sizes	string	false	sizes for srcset	""
noImage	boolean	false	if true, no image is used (for text only)	false
timeout	number	false	delay in milliseconds before src is loaded	0
lazy	boolean	false	if img should be lazy-loaded	true

Simple

1<ImageDesigner
2  src={img.src}
3  placeholder={img.placeholder}
4  style={{
5    height: "auto",
6    margin: "auto"
7  }}
8/>

With Caption (as background-image)

1<ImageDesigner
2  src={img.src}
3  srcset={img.srcset}
4  sizes={img.sizes}
5  placeholder={img.placeholder}
6  id={["img", i].join("-")}
7  className={imgClass}
8  tag="div"
9>
10  <div
11    className={captionClass}
12    dangerouslySetInnerHTML={{
13      __html: tryDecode(img.caption)
14    }}
15  />
16</ImageDesigner>

Try Things Live

to test the options, git clone this repo, put some images in the 'imgs' directory, and set-up your configuration somewhere in the 'src' directory. Then run yarn start ./relative/path/from/src/to/configuration or npm run start ./relative/path/from/src/to/configuration. There is an example provided. To run it locally, execute yarn start ./dev-scripts/example or npm run start ./dev-scripts/example.

Contributing

clone, install, tinker, submit. Thanks!