Image Context is a React and Next.js component that lets you add interactive context to your images in react and nextJS.
Screen.Recording.mp4
---
## Installation
```bash
npm install image-context
or
pnpm add image-contextor
yarn add image-contextimport { ImageContext } from "image-context";
export default function Example() {
return (
<ImageContext
alt = "An image of the ancient Karnak Temple in Luxor, Egypt."
src="/temple.jpg"
context="Sunlit columns with hieroglyphs at the ancient Karnak Temple in Luxor, Egypt."
/>
);
}The context prop can also receive a render function.
<ImageContext
src="/friends.jpg"
context={({ isVisible }) => (
<div
className={`transition-all duration-500 ${
isVisible
? "opacity-100 translate-y-0"
: "opacity-0 translate-y-4"
}`}
>
<h3>Friends at the beach</h3>
<p>A memorable summer trip.</p>
</div>
)}
/>This allows you to build fully customized context panels with animations and rich content.
Attach contextual information to specific locations within an image.
<ImageContext
src="/group-photo.jpg"
showTrigger={false}
>
<Hotspot
x={25}
y={60}
context="John posing near the entrance."
/>
<Hotspot
x={70}
y={40}
context="Sarah enjoying the event."
/>
</ImageContext><ImageContext
src="/travel.jpg"
context="A beautiful view of the city skyline during sunset."
>
<Hotspot
x={45}
y={35}
context="Historic cathedral built in the 18th century."
/>
<Hotspot
x={70}
y={60}
context="Popular local marketplace."
/>
</ImageContext>The main image container responsible for displaying contextual information.
| Prop | Type | Description |
|---|---|---|
| src | string | Image source |
| context | string | ReactNode | Render Function | Content displayed when context is revealed |
| triggerSize | "sm" | "md" | "lg" | Size of the context trigger |
| showTrigger | boolean | Show or hide the main trigger |
| children | ReactNode | Hotspots and custom content |
Attach contextual information to specific positions within an image.
| Prop | Type | Description |
|---|---|---|
| x | number | Horizontal position (%) |
| y | number | Vertical position (%) |
| context | string | ReactNode | Hotspot content |
| triggerSize | "sm" | "md" | "lg" | Hotspot trigger size |
Image Context is designed to complement—not replace—proper image accessibility practices.
Always provide meaningful image descriptions and alt text where appropriate.
Image Context ships with full TypeScript support out of the box.
MIT