Example added

fayeed · Jul 16, 2020 · 7027caa · 7027caa
1 parent 2ea94c2
commit 7027caa
Show file tree

Hide file tree

Showing 10 changed files with 551 additions and 19 deletions.
diff --git a/example/package-lock.json b/example/package-lock.json
diff --git a/example/src/App.js b/example/src/App.js
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -0,0 +1,51 @@
+import React, { useRef } from "react";
+import { useScreenshot } from "use-screenshot-hook";
+import GithubIcon from "./github";
+import CloseIcon from "./close";
+
+const App = () => {
+  const ref = useRef(null);
+  const { image, takeScreenshot, isLoading, clear } = useScreenshot();
+
+  return (
+    <div className={["container", "container-unlock"].join(" ")}>
+      <div className="base">
+        <div className="book1">
+          <span className="ribbon1">　</span>
+          <div className="book1-r"></div>
+        </div>
+        <div className="book2"></div>
+        <div className="book3">
+          <span className="ribbon3">　</span>
+          <div className="book3-l"></div>
+        </div>
+        <div className="book4"></div>
+        <div className="book5"></div>
+        <div className="book6">
+          <span className="ribbon6">　</span>
+          <div className="book6-l"></div>
+        </div>
+        <div className="book7"></div>
+        <div className="row">
+          <h1>use-screenshot-hook</h1>
+          <a href="https://github.com/fayeed/use-screenshot" target="_blank">
+            <GithubIcon height={36} width={36} />
+          </a>
+        </div>
+        <p>Takes screenshot for react components</p>
+        <button className={["btn"].join(" ")} onClick={() => takeScreenshot()}>
+          {"Screenshot"}
+        </button>
+      </div>
+
+      {image && (
+        <div className="imageContainer">
+          <img width={800} src={image} />
+          <CloseIcon onClick={clear} />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default App;
diff --git a/example/src/close.tsx b/example/src/close.tsx
@@ -0,0 +1,11 @@
+import * as React from "react";
+
+function CloseIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg height="1em" viewBox="0 0 329.269 329" width="1em" {...props}>
+      <path d="M194.8 164.77L323.013 36.555c8.343-8.34 8.343-21.825 0-30.164-8.34-8.34-21.825-8.34-30.164 0L164.633 134.605 36.422 6.391c-8.344-8.34-21.824-8.34-30.164 0-8.344 8.34-8.344 21.824 0 30.164l128.21 128.215L6.259 292.984c-8.344 8.34-8.344 21.825 0 30.164a21.266 21.266 0 0015.082 6.25c5.46 0 10.922-2.09 15.082-6.25l128.21-128.214 128.216 128.214a21.273 21.273 0 0015.082 6.25c5.46 0 10.922-2.09 15.082-6.25 8.343-8.34 8.343-21.824 0-30.164zm0 0" />
+    </svg>
+  );
+}
+
+export default CloseIcon;
diff --git a/example/src/github.tsx b/example/src/github.tsx
@@ -0,0 +1,14 @@
+import * as React from "react";
+
+function GithubIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg height="1em" viewBox="0 0 24 24" width="1em" {...props}>
+      <path
+        d="M12 .5C5.37.5 0 5.78 0 12.292c0 5.211 3.438 9.63 8.205 11.188.6.111.82-.254.82-.567 0-.28-.01-1.022-.015-2.005-3.338.711-4.042-1.582-4.042-1.582-.546-1.361-1.335-1.725-1.335-1.725-1.087-.731.084-.716.084-.716 1.205.082 1.838 1.215 1.838 1.215 1.07 1.803 2.809 1.282 3.495.981.108-.763.417-1.282.76-1.577-2.665-.295-5.466-1.309-5.466-5.827 0-1.287.465-2.339 1.235-3.164-.135-.298-.54-1.497.105-3.121 0 0 1.005-.316 3.3 1.209.96-.262 1.98-.392 3-.398 1.02.006 2.04.136 3 .398 2.28-1.525 3.285-1.209 3.285-1.209.645 1.624.24 2.823.12 3.121.765.825 1.23 1.877 1.23 3.164 0 4.53-2.805 5.527-5.475 5.817.42.354.81 1.077.81 2.182 0 1.578-.015 2.846-.015 3.229 0 .309.21.678.825.56C20.565 21.917 24 17.495 24 12.292 24 5.78 18.627.5 12 .5z"
+        fill="#212121"
+      />
+    </svg>
+  );
+}
+
+export default GithubIcon;