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
$ yarn add react-image-designer
npm
$ npm install react-image-designer
The UMD build is also available on unpkg:
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
<ImageDesigner src=imgsrc placeholder=imgplaceholder style= height: "auto" margin: "auto" />
With Caption (as background-image)
<ImageDesigner src=imgsrc srcset=imgsrcset sizes=imgsizes placeholder=imgplaceholder id="img" i className=imgClass tag="div"> <div className=captionClass dangerouslySetInnerHTML= __html: /></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!