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:
<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
<ImageDesigner
src={img.src}
placeholder={img.placeholder}
style={{
height: "auto",
margin: "auto"
}}
/>
With Caption (as background-image)
<ImageDesigner
src={img.src}
srcset={img.srcset}
sizes={img.sizes}
placeholder={img.placeholder}
id={["img", i].join("-")}
className={imgClass}
tag="div"
>
<div
className={captionClass}
dangerouslySetInnerHTML={{
__html: tryDecode(img.caption)
}}
/>
</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!
