https://github.com/shelfio/image-preview-overlay
https://github.com/shelfio/image-preview-overlay
Last synced: 7 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/shelfio/image-preview-overlay
- Owner: shelfio
- License: mit
- Created: 2024-03-01T13:07:50.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2025-06-05T00:06:37.000Z (7 months ago)
- Last Synced: 2025-06-05T04:43:20.677Z (7 months ago)
- Language: TypeScript
- Size: 96.7 KB
- Stars: 1
- Watchers: 10
- Forks: 0
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: license
- Codeowners: CODEOWNERS
Awesome Lists containing this project
README
## Installation
Note: uses styled-components
Install 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
```
## 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 (optional)` | HTML attributes passed to the corresponding elements |
| imageProps | `HTMLAttributes (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
```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 (
);
};
```
## Publish
```sh
$ git checkout master
$ yarn version
$ yarn publish
$ git push origin master --tags
```
## License
MIT © [Shelf](https://shelf.io)