Installation

Note: uses styled-components

Install the library using npm:

$ npm install styled-components

$ npm install @shelf/image-preview-overlay

Install the library using yarn:

$ yarn add styled-components

$ yarn add @shelf/image-preview-overlay

Props

| Prop Name | Type | Description| |-----------|------|------------| | getImages | function (optional)| A function that can be used to modify preview images list. Signature: (event: ElementMouseEvent) => {src: string; alt?: string}[] \| undefined| | getInitialPreviewImageIndex | function (optional) | A function to customly choose the initial image from the list to be shown when fullview is opened | | startPreviewFromTargetImage | boolean (optional)| Default false (always opens first image from the list). If set to true - will try to open the target image (if it is present in the list returned by getImages) | | triggerProps, portalWrapperProps, imageOverlayProps | HTMLAttributes<HTMLDivElement> (optional) | HTML attributes passed to the corresponding elements |
| imageProps | HTMLAttributes<HTMLImageElement> (optional) | HTML attributes passed to the fullview image element |

Usage

ImagePreviewOverlay

ImagePreviewOverlay is a wrapper that renders full image preview on child image tag click

import {ImagePreviewOverlay} from '@shelf/image-preview-overlay';

// Simple usage
const Component = () => (
  <ImagePreviewOverlay>
    <span>
      Shelf.io
      <p>
        <img src={'shelf.io'} />
      </p>
    </span>
  </ImagePreviewOverlay>
);

// Custom getImages prop and multiple images
const Component = () => {
  const getImages = _event => [
    {
      src: 'source-1',
      alt: 'source 1 alt',
    },
    {
      src: 'source-2',
    },
  ];

  return (
    <ImagePreviewOverlay getImages={getImages}>
      <img src={'image-snippet-src'} />
    </ImagePreviewOverlay>
  );
};

Publish

$ git checkout master
$ yarn version
$ yarn publish
$ git push origin master --tags

License

MIT © Shelf