A modular toolkit to make static images interactive in react.
It supports:
- Cross platform support for zooming and panning (thanks to react-zoom-pan-pinch)
- Fully customizable interactables that scale and move with the base image
- Reusable interactable components, with more advanced interactables coming soon!
- Freedom to Mix & Match any combination of interactables
- Built-in keyword based search
- Typescript support
Remage is going to be launched as an npm package soon!
Import the remage components, and use the following props to configure it:
src
: This is a path to the base imagetitle
: Optional, Displayed above the remage and in the search barinteractables
: An Array of interactable objects with the following type:
type Interactable = {
top: number,
left: number,
interactable: (state: {scale: number, positionX: number, positionY: number}) => React.ReactNode
}
More examples can be found on the remage webpage
<Remage
src="base-img.png"
title="Seven Wonders"
interactables={[
{
top: "20%",
left: "31.4%",
interactable: () => {
return <div>x</div>
}
}
]}
/>