Remage

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

Quickstart

Remage is going to be launched as an npm package soon!

Import the remage components, and use the following props to configure it:

1. src: This is a path to the base image
2. title: Optional, Displayed above the remage and in the search bar
3. interactables: 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
}

Sample Usage

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>
         }
      }
   ]}
/>

Authors

Soham Kulkarni

Suyash Nagumalli