img-butler v0.2.1

img-butler

A React-based image manipulator, allowing users to examine a source image using a mouse, trackpad, or touch screen.

useImgButler()

Produces an tag. This contains a canvas to display and interact with your image.

Options:

\

This is a point that can be displayed on the map. It contains an optional tag, which may be toggled when the point is clicked.

Options:

\

A popup that a \ can accept. It can be used to encase other React tags.

Example

<Popup>
  <h1> hello! </h1>
  <input
    type="text"
    value={inputText}
    onChange={(e) => setInputText(e.target.value)}
  />
  <p> have a nice day! </p>
</Popup>

GestureEvent

Fired when a user-iput gesture detected on the image.

Fields:

MOTION Event Types:

DrawableEvent

DRAWABLE_EVENT Event Types:

External Control

The high-level concept is to call useImgButler() to create a \ tag, and populate it with the fields and/or objects you want.

Example:

const title = "My Cool Map";
const desc = "A map that is super cool";
const popup = <Popup>
  <p> popping up! </p>
</Popup>;
const points = [
  <Point
    xPercentage={50}
    yPercentage={50}
    popup={popup}
    startOpen={true}
  />
];
const src = require("../assets/my-map.png");
const onGesture = (e) => console.log(e);
const imgButler = useImgButler({ title, desc, points, src, onGesture });
...
<div className="app-scene">
  {imgButler}
</div>

Exports

The following items are exports of the img-butler package: | Name |Description | |-------------------|----------------------------------------------------| | MOTION | See above | | DRAWABLE_EVENT | See above | | GestureEvent | See above | | DrawableEvent | See above | | useImgButler | See above | | Point | See above | | Popup | See above |