SVG path click

example/MapComponent.jsx

@@ -1,15 +1,16 @@
 // development
-import TurkeyMap from './../src/TurkeyMap'
+import TurkeyMap from "./../src/TurkeyMap";
 // build test
 // import TurkeyMap from './../build/TurkeyMap'
 // npm test
 // import TurkeyMap from 'react-turkey-map'
 
-export default ({ colorData, tooltipData }) => {
+export default ({ colorData, tooltipData, onClick }) => {
   return (
     <TurkeyMap
       colorData={colorData}
       tooltipData={tooltipData}
+      onClick={onClick}
     />
-  )
-}
+  );
+};

example/index.jsx

@@ -1,29 +1,30 @@
 /** @jsxImportSource @emotion/react */
-import { useState } from 'react'
-import { createRoot } from 'react-dom/client'
+import { useState } from "react";
+import { createRoot } from "react-dom/client";
 
-import styles from './styles'
-import Buttons from './Buttons'
-import MapComponent from './MapComponent'
+import styles from "./styles";
+import Buttons from "./Buttons";
+import MapComponent from "./MapComponent";
 
 const App = () => {
-  const [colorData, setColorData] = useState({})
-  const [tooltipData, setTooltipData] = useState({})
+  const [colorData, setColorData] = useState({});
+  const [tooltipData, setTooltipData] = useState({});
+
+  const handleOnClick = (city, plate) => {
+    console.log(`City: ${city}, Plate: ${plate}`);
+  };
 
   return (
     <div css={styles.wrapper}>
-      <Buttons
-        setColorData={setColorData}
-        setTooltipData={setTooltipData}
-      />
+      <Buttons setColorData={setColorData} setTooltipData={setTooltipData} />
 
       <MapComponent
         colorData={colorData}
         tooltipData={tooltipData}
+        onClick={handleOnClick}
       />
     </div>
-  )
-}
+  );
+};
 
-createRoot(document.getElementById('app'))
-  .render(<App />)
+createRoot(document.getElementById("app")).render(<App />);

src/TurkeyMap.jsx

@@ -1,46 +1,56 @@
 /** @jsxImportSource @emotion/react */
-import React, { useState } from 'react'
+import { useState } from "react";
 
-import cities from './cities'
-import styles from './styles'
+import cities from "./cities";
+import styles from "./styles";
 
-export default ({ colorData: _colorData, showTooltip: _showTooltip, tooltipData: _tooltipData }) => {
-  const colorData = _colorData || {}
-  const showTooltip = _showTooltip !== undefined ? _showTooltip : true
-  const tooltipData = _tooltipData || {}
+export default ({
+  colorData: _colorData,
+  showTooltip: _showTooltip,
+  tooltipData: _tooltipData,
+  onClick: _onClick,
+}) => {
+  const colorData = _colorData || {};
+  const showTooltip = _showTooltip !== undefined ? _showTooltip : true;
+  const tooltipData = _tooltipData || {};
+  const onClick = _onClick;
 
-  const [tooltip, setTooltip] = useState('')
-  const [position, setPosition] = useState({ top: 0, left: 0 })
+  const [tooltip, setTooltip] = useState("");
+  const [position, setPosition] = useState({ top: 0, left: 0 });
 
-  const handleMouseOver = event => {
-    if (event.target.tagName === 'path') {
-      const city = event.target.parentNode.getAttribute('data-city')
-      const plate = event.target.parentNode.getAttribute('data-plate')
+  const handleMouseOver = (event) => {
+    if (event.target.tagName === "path") {
+      const city = event.target.parentNode.getAttribute("data-city");
+      const plate = event.target.parentNode.getAttribute("data-plate");
       const TooltipComponent = (
         <div css={styles.tooltipContent}>
-          {city}{tooltipData[plate] ? `: ${tooltipData[plate]}` : ''}
+          {city}
+          {tooltipData[plate] ? `: ${tooltipData[plate]}` : ""}
         </div>
-      )
-      setTooltip(TooltipComponent)
+      );
+      setTooltip(TooltipComponent);
     }
-  }
+  };
 
-  const handleMouseMove = event => {
-    setPosition({ top: event.pageY + 25, left: event.pageX })
-  }
+  const handleMouseMove = (event) => {
+    setPosition({ top: event.pageY + 25, left: event.pageX });
+  };
 
   const handleMouseOut = () => {
-    setTooltip('')
-  }
+    setTooltip("");
+  };
 
-  const handleClick = event => {
-    if (event.target.tagName === 'path') {
-      const parent = event.target.parentNode
-      const city = parent.getAttribute('data-city')
-      const plate = parent.getAttribute('data-plate')
-      console.log({ city, plate })
+  const handleClick = (event) => {
+    if (event.target.tagName === "path") {
+      const parent = event.target.parentNode;
+      const city = parent.getAttribute("data-city");
+      const plate = parent.getAttribute("data-plate");
+
+      if (onClick) {
+        onClick(city, plate);
+      }
     }
-  }
+  };
 
   return (
     <div>
@@ -53,48 +63,39 @@ export default ({ colorData: _colorData, showTooltip: _showTooltip, tooltipData:
 
       <div css={styles.turkeyMapWrapper}>
         <svg
-          version='1.1'
+          version="1.1"
           onClick={handleClick}
           css={styles.turkeyMap}
-          viewBox='0 0 1007 443'
-          xmlns='http://www.w3.org/2000/svg'
+          viewBox="0 0 1007 443"
+          xmlns="http://www.w3.org/2000/svg"
           {...(showTooltip ? { onMouseOut: handleMouseOut } : {})}
           {...(showTooltip ? { onMouseOver: handleMouseOver } : {})}
           {...(showTooltip ? { onMouseMove: handleMouseMove } : {})}
         >
           <g>
-            {
-              cities.map((city, key) => {
-                return (
-                  <g
-                    key={key}
-                    id={city.plate}
-                    data-city={city.city}
-                    data-plate={city.plate}
-                  >
-                    {
-                      colorData[city.plate]
-                        ? (
-                          <path
-                            d={city.draw}
-                            css={styles.path}
-                            style={{ fill: colorData[city.plate] }}
-                          />
-                          )
-                        : (
-                          <path
-                            d={city.draw}
-                            css={styles.path}
-                          />
-                          )
-                    }
-                  </g>
-                )
-              })
-            }
+            {cities.map((city, key) => {
+              return (
+                <g
+                  key={key}
+                  id={city.plate}
+                  data-city={city.city}
+                  data-plate={city.plate}
+                >
+                  {colorData[city.plate] ? (
+                    <path
+                      d={city.draw}
+                      css={styles.path}
+                      style={{ fill: colorData[city.plate] }}
+                    />
+                  ) : (
+                    <path d={city.draw} css={styles.path} />
+                  )}
+                </g>
+              );
+            })}
           </g>
         </svg>
       </div>
     </div>
-  )
-}
+  );
+};