@shelf/image-preview-overlay NPM

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

image preview fullscreen react

2 months ago

2 months ago

2 months ago

2 months ago