Canvas-marker NPM

marker

hook that facilates creating markers on screen on click

Install

npm install --save canvas-marker

Usage

import { useMarker } from 'canvas-marker'

const App = () =>{
  const [setShowMarker, XY, setXY, getCoordinates] = useMarker(true);

  /** Remove all markers, i.e save state of markers 
      beforehand if you plan to reuse the again 
  */
  const resetMarker = () => {
    setShowMarker(false);
  }
  
  /** Add default marker points or get points 
      from previous marker session 
   */
  const addDefaultCoordinates = () => {
    setXY([[419,275], [534,308]]);
  }

  const points = XY.map((xy, index) =>
  <span>{`marker`}</span>
);
  return (
    <div className="App">
      <button onClick={resetMarker}>Reset</button>
      <button onClick={addDefaultCoordinates}>add default</button>
      <div className="Canvas" onClick={getCoordinates}>
       {points}
      </div>
    </div>
  );

Example