useImagePopup
A hook that controls the logic for opening, closing, and navigating image popups or previews.
Usage
Basic usage example to quickly see how the useImagePopup works.
4N
BF
OL
Y
+999
Selectors
By default, selectors API using class="embeded-image"
function MyComponent() {
useImagePopup();
return (
<article>
<img className="embeded-image" src="https://.../a.png" alt="" width="50" height="50" />
<img className="embeded-image" src="https://.../b.jpg" alt="" width="50" height="50" />
<img className="embeded-image" src="https://.../c.svg" alt="" width="50" height="50" />
</article>
);
}Use selectors by [attribute]
function MyComponent() {
useImagePopup("[data-popup]");
return (
<article>
<img data-popup="" src="https://.../a.png" alt="" width="50" height="50" />
<img data-popup="" src="https://.../b.jpg" alt="" width="50" height="50" />
<img data-popup="" src="https://.../c.svg" alt="" width="50" height="50" />
</article>
);
}Use selectors by <img> Element
import Image from "next/image";
function MyComponent() {
useImagePopup("img");
return (
<div>
<article>
<Image src="https://.../a.png" alt="" width="50" height="50" />
<img src="https://.../b.jpg" alt="" width="50" height="50" />
<img data-popup="" src="https://.../c.svg" alt="" width="50" height="50" />
</article>
<img className="embeded-image" src="https://.../x.png" alt="" width="50" height="50" />
<Image className="" src="https://.../y.png" alt="" width="50" height="50" />
</div>
);
}Depend On
API
| API | Type | Default |
|---|---|---|
selectors? | React.ElementType | (string & {}) | ".embeded-image" |
timeRender? | number | timeRender: 350 |
Source Codes
Full working code example, including necessary markup and styles. You can copy and paste this code directly to start using the component immediately.