Plain wrapper that renders full image preview on child image tag click
npm install @shelf/image-preview-overlayInstall the library using npm:
``shell`
$ npm install styled-components`shell`
$ npm install @shelf/image-preview-overlay
Install the library using yarn:
`shell`
$ yarn add styled-components`shell`
$ yarn add @shelf/image-preview-overlay
| 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|function (optional)
| getInitialPreviewImageIndex | | A function to customly choose the initial image from the list to be shown when fullview is opened |boolean (optional)
| startPreviewFromTargetImage | | 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) |HTMLAttributes
| triggerProps, portalWrapperProps, imageOverlayProps | | HTML attributes passed to the corresponding elements | HTMLAttributes
| imageProps | | HTML attributes passed to the fullview image element |
ImagePreviewOverlay is a wrapper that renders full image preview on child image tag click
`js
import {ImagePreviewOverlay} from '@shelf/image-preview-overlay';
// Simple usage
const Component = () => (
Shelf.io
);
// Custom getImages prop and multiple images
const Component = () => {
const getImages = _event => [
{
src: 'source-1',
alt: 'source 1 alt',
},
{
src: 'source-2',
},
];
return (
);
};
`
`sh``
$ git checkout master
$ yarn version
$ yarn publish
$ git push origin master --tags
MIT © Shelf