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!