@shelf/image-preview-overlay

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