Improving the custom marker example

galexandrade · Sep 20, 2020 · c4ab4d1 · c4ab4d1
1 parent 029ed25
commit c4ab4d1
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 40 deletions.
diff --git a/example/package.json b/example/package.json
@@ -12,7 +12,7 @@
     "@types/react-dom": "^16.9.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "react-image-marker": "^1.0.5",
+    "react-image-marker": "^1.0.6",
     "react-scripts": "3.4.3",
     "typescript": "~3.7.2"
   },

diff --git a/example/src/App.css b/example/src/App.css
@@ -1,38 +1,10 @@
 .App {
-  text-align: center;
+    text-align: center;
 }
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+.custom-marker {
+    background-color: black;
+    color: white;
+    border-radius: 5px;
+    padding: 5px;
 }
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -8,7 +8,7 @@ function App() {
         { top: 10, left: 50 },
     ]);
     const CustomMarker = (props: MarkerComponentProps) => {
-        return <p>Coooool - {props.itemNumber}</p>;
+        return <p className="custom-marker">Coooool - {props.itemNumber}</p>;
     };
     return (
         <div className="App">

diff --git a/example/yarn.lock b/example/yarn.lock
@@ -8615,10 +8615,10 @@ react-error-overlay@^6.0.7:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.7.tgz#1dcfb459ab671d53f660a991513cb2f0a0553108"
   integrity sha512-TAv1KJFh3RhqxNvhzxj6LeT5NWklP6rDr2a0jaTfsZ5wSZWHOGeqQyejUp3xxLfPt2UpyJEcVQB/zyPcmonNFA==
 
-react-image-marker@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/react-image-marker/-/react-image-marker-1.0.5.tgz#2e4d5556d2cdac4363014f78ad83dbfe33da3120"
-  integrity sha512-+uOuDl/Wr1rXcgWmebErEqby7KF19MLI8oKhFYo7KrREdkMCi/cwt2nqb0BJh7GuG0R1xfFnOLgFW1QckG7iCg==
+react-image-marker@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/react-image-marker/-/react-image-marker-1.0.6.tgz#4204476f93ddd84336c43cf73d5cb64275fc6290"
+  integrity sha512-/blS5Gl3mLAUTnc1RRw+AzKatAEOTSk33CRQ41N1Q65hHh/FCQF3oZCTMBtRhhrZ0uce/TFvWJE/g14U08T8vg==
 
 react-is@^16.12.0, react-is@^16.8.1, react-is@^16.8.4:
   version "16.13.1"