diff --git a/example/package-lock.json b/example/package-lock.json index 3fc1fef..6b77d47 100644 --- a/example/package-lock.json +++ b/example/package-lock.json @@ -1561,11 +1561,36 @@ "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz", "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==" }, + "@types/prop-types": { + "version": "15.7.3", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz", + "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==", + "dev": true + }, "@types/q": { "version": "1.5.4", "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.4.tgz", "integrity": "sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug==" }, + "@types/react": { + "version": "16.9.43", + "resolved": "https://registry.npmjs.org/@types/react/-/react-16.9.43.tgz", + "integrity": "sha512-PxshAFcnJqIWYpJbLPriClH53Z2WlJcVZE+NP2etUtWQs2s7yIMj3/LDKZT/5CHJ/F62iyjVCDu2H3jHEXIxSg==", + "dev": true, + "requires": { + "@types/prop-types": "*", + "csstype": "^2.2.0" + } + }, + "@types/react-dom": { + "version": "16.9.8", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.9.8.tgz", + "integrity": "sha512-ykkPQ+5nFknnlU6lDd947WbQ6TE3NNzbQAkInC2EKY1qeYdTKp7onFusmYZb+ityzx2YviqT6BXSu+LyWWJwcA==", + "dev": true, + "requires": { + "@types/react": "*" + } + }, "@types/stack-utils": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-1.0.1.tgz", @@ -2656,6 +2681,11 @@ } } }, + "base64-arraybuffer": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-0.2.0.tgz", + "integrity": "sha512-7emyCsu1/xiBXgQZrscw/8KPRT44I4Yq9Pe6EGs3aPRTsWuggML1/1DTuZUuIaJPIm1FTDUVXl4x/yW8s0kQDQ==" + }, "base64-js": { "version": "1.3.1", "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.3.1.tgz", @@ -3722,6 +3752,14 @@ } } }, + "css-line-break": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-1.1.1.tgz", + "integrity": "sha512-1feNVaM4Fyzdj4mKPIQNL2n70MmuYzAXZ1aytlROFX1JsOo070OsugwGjj7nl6jnDJWHDM8zRZswkmeYVWZJQA==", + "requires": { + "base64-arraybuffer": "^0.2.0" + } + }, "css-loader": { "version": "3.4.2", "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-3.4.2.tgz", @@ -3916,6 +3954,12 @@ "cssom": "0.3.x" } }, + "csstype": { + "version": "2.6.11", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.11.tgz", + "integrity": "sha512-l8YyEC9NBkSm783PFTvh0FmJy7s5pFKrDp49ZL7zBGX3fWkO+N4EEyan1qqp8cwPLDcD0OSdyY6hAMoxp34JFw==", + "dev": true + }, "cyclist": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/cyclist/-/cyclist-1.0.1.tgz", @@ -6134,6 +6178,14 @@ } } }, + "html2canvas": { + "version": "1.0.0-rc.5", + "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.0.0-rc.5.tgz", + "integrity": "sha512-DtNqPxJNXPoTajs+lVQzGS1SULRI4GQaROeU5R41xH8acffHukxRh/NBVcTBsfCkJSkLq91rih5TpbEwUP9yWA==", + "requires": { + "css-line-break": "1.1.1" + } + }, "htmlparser2": { "version": "3.10.1", "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.10.1.tgz", @@ -10074,7 +10126,7 @@ } }, "react": { - "version": "file:../node_modules/react", + "version": "file:https:/registry.npmjs.org/react/-/react-16.13.1.tgz", "integrity": "sha512-YMZQQq32xHLX0bz5Mnibv1/LHb3Sqzngu7xstSM+vrkE5Kzr9xE0yMByK5kMoTK30YVJE61WfbxIFFvfeDKT1w==", "requires": { "loose-envify": "^1.1.0", @@ -12444,6 +12496,9 @@ }, "use-screenshot-hook": { "version": "file:..", + "requires": { + "html2canvas": "^1.0.0-rc.5" + }, "dependencies": { "@babel/code-frame": { "version": "7.10.4", @@ -22767,14 +22822,14 @@ } }, "react": { - "version": "16.13.1", - "resolved": "https://registry.npmjs.org/react/-/react-16.13.1.tgz", + "version": "file:https:/registry.npmjs.org/react/-/react-16.13.1.tgz", "integrity": "sha512-YMZQQq32xHLX0bz5Mnibv1/LHb3Sqzngu7xstSM+vrkE5Kzr9xE0yMByK5kMoTK30YVJE61WfbxIFFvfeDKT1w==", "requires": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1", "prop-types": "^15.6.2" - } + }, + "dependencies": {} }, "react-app-polyfill": { "version": "1.0.6", diff --git a/example/src/App.js b/example/src/App.js deleted file mode 100644 index 5a46ac4..0000000 --- a/example/src/App.js +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react' - -import { useMyHook } from 'use-screenshot-hook' - -const App = () => { - const example = useMyHook() - return ( -
- {example} -
- ) -} -export default App diff --git a/example/src/App.tsx b/example/src/App.tsx new file mode 100644 index 0000000..78d1816 --- /dev/null +++ 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 ( +
+
+
+ 　 +
+
+
+
+ 　 +
+
+
+
+
+ 　 +
+
+
+
+

use-screenshot-hook

+ + + +
+

Takes screenshot for react components

+ +
+ + {image && ( +
+ + +
+ )} +
+ ); +}; + +export default App; diff --git a/example/src/close.tsx b/example/src/close.tsx new file mode 100644 index 0000000..221f731 --- /dev/null +++ b/example/src/close.tsx @@ -0,0 +1,11 @@ +import * as React from "react"; + +function CloseIcon(props: React.SVGProps) { + return ( + + + + ); +} + +export default CloseIcon; diff --git a/example/src/github.tsx b/example/src/github.tsx new file mode 100644 index 0000000..84eb77f --- /dev/null +++ b/example/src/github.tsx @@ -0,0 +1,14 @@ +import * as React from "react"; + +function GithubIcon(props: React.SVGProps) { + return ( + + + + ); +} + +export default GithubIcon; diff --git a/example/src/index.css b/example/src/index.css index b1ced3b..2d1db00 100644 --- a/example/src/index.css +++ b/example/src/index.css @@ -1,5 +1,388 @@ -/* body { +body, +* { margin: 0; padding: 0; font-family: sans-serif; -} */ +} + +h1 { + font-size: 48px; + margin-right: 36px; +} + +p { + font-size: 18px; + margin-bottom: 40px; +} + +code { + padding: 4px 8px; + color: white; + font-size: 14px; + font-family: monospace; + border-radius: 4px; + background-color: grey; +} + +.row { + display: flex; + align-items: center; + margin-bottom: 30px; + margin-top: 100px; +} + +.row > svg { + cursor: pointer; +} + +.container { + height: 100vh; + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + transition: all 0.4s; + position: relative; +} + +.imageContainer { + border: 1px solid crimson; + border-radius: 4px; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +.imageContainer > svg { + position: absolute; + top: -15px; + right: -15px; + background: white; + padding: 10px; + border-radius: 50%; + cursor: pointer; +} + +.loading { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +.btn { + font-size: 24px; + width: 200px; + padding: 20px 0; + border-radius: 8px; + border: none; + background-color: #e8505b; + filter: drop-shadow(0px 12px 24px #e8505b); + color: white; + transition: all 0.4s; + cursor: pointer; + margin-bottom: 80px; +} + +.btn-small { + width: 100px; + font-size: 16px; + padding: 10px 0; + margin-top: 40px; +} + +.btn:hover { + filter: drop-shadow(0px 18px 36px #eb3844); + transform: translateY(-10px); +} + +.btn:hover { + filter: drop-shadow(0px 18px 36px #eb3844); + transform: translateY(-2px); +} + +.btn:focus { + outline: none; +} + +.btn-unlock { + background-color: #facb4a; + filter: drop-shadow(0px 12px 24px #facb4a); +} + +.btn-unlock:hover { + filter: drop-shadow(0px 18px 36px #fcc737); + transform: translateY(-10px); +} + +textarea { + width: 400px; + border-radius: 4px; + padding: 10px; + border: none; +} + +textarea:focus { + outline: none; +} + +.base { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + height: 100vh; + width: 100%; + margin: -8px; + background-color: #f5e3b3; +} + +.book1 { + position: relative; + height: 30px; + width: 140px; + background: #fffff0; + border-radius: 10px; + border: 5px solid #942343; +} +.ribbon1 { + display: inline-block; + position: relative; + top: 15px; + left: 10px; + margin: 0; + padding: 2px 0; + z-index: 2; + width: 20px; + text-align: center; + background: #ff785b; +} +.ribbon1:after { + content: ""; + position: absolute; + left: 0; + top: 100%; + height: 0; + width: 0; + border-left: 10px solid #ff785b; + border-right: 10px solid #ff785b; + border-bottom: 10px solid transparent; +} +.book1-r { + position: absolute; + height: 40px; + width: 10px; + background: #a0d8ef; + right: -5px; + bottom: -5px; +} +.book1-r:before { + content: ""; + position: absolute; + height: 30px; + width: 5px; + background: #a0d8ef; + top: 5px; + right: 10px; +} + +.book2 { + position: relative; + height: 40px; + width: 120px; + background: #a688bd; + right: 5px; +} +.book2:before, +.book2:after { + content: ""; + position: absolute; +} +.book2:before { + height: 40px; + width: 60px; + left: 10px; + border-left: 20px double #fff; + border-right: 20px double #fff; +} +.book2:after { + height: 20px; + width: 30px; + background: #fff; + top: 10px; + left: 45px; +} + +.book3 { + position: relative; + height: 30px; + width: 140px; + background: #fffff0; + border-radius: 10px; + border: 5px solid #004d25; +} +.ribbon3 { + display: inline-block; + position: relative; + top: 15px; + left: 100px; + margin: 0; + padding: 2px 0; + z-index: 2; + width: 20px; + text-align: center; + background: #a4d5bd; +} +.ribbon3:after { + content: ""; + position: absolute; + left: 0; + top: 100%; + height: 0; + width: 0; + border-left: 10px solid #a4d5bd; + border-right: 10px solid #a4d5bd; + border-bottom: 10px solid transparent; +} +.book3-l { + position: absolute; + height: 40px; + width: 10px; + background: #a0d8ef; + left: -5px; + bottom: -5px; +} +.book3-l:before { + content: ""; + position: absolute; + height: 30px; + width: 5px; + background: #a0d8ef; + top: 5px; + left: 10px; +} + +.book4 { + position: relative; + height: 35px; + width: 160px; + background: #ed6d35; + right: 5px; +} +.book4:before, +.book4:after { + content: ""; + position: absolute; +} +.book4:before { + height: 35px; + width: 100px; + left: 10px; + border-left: 20px double #fff; + border-right: 20px double #fff; +} +.book4:after { + height: 20px; + width: 40px; + background: #fff; + top: 8px; + left: 60px; +} + +.book5 { + position: relative; + height: 35px; + width: 150px; + background: #0073a8; + right: 5px; +} +.book5:before, +.book5:after { + content: ""; + position: absolute; +} +.book5:before { + height: 35px; + width: 90px; + left: 10px; + border-left: 20px double #fff; + border-right: 20px double #fff; +} + +.book6 { + position: relative; + height: 30px; + width: 170px; + background: #fffff0; + border-radius: 10px; + border: 5px solid #622d18; + right: 10px; +} +.ribbon6 { + display: inline-block; + position: relative; + top: 15px; + left: 100px; + margin: 0; + padding: 2px 0; + z-index: 2; + width: 20px; + text-align: center; + background: #a4d5bd; +} +.ribbon6:after { + content: ""; + position: absolute; + left: 0; + top: 100%; + height: 0; + width: 0; + border-left: 10px solid #a4d5bd; + border-right: 10px solid #a4d5bd; + border-bottom: 10px solid transparent; +} +.book6-l { + position: absolute; + height: 40px; + width: 10px; + background: #a0d8ef; + left: -5px; + bottom: -5px; +} +.book6-l:before { + content: ""; + position: absolute; + height: 30px; + width: 5px; + background: #a0d8ef; + top: 5px; + left: 10px; +} + +.book7 { + position: relative; + height: 40px; + width: 200px; + background: #fcc800; + right: 5px; +} +.book7:before, +.book7:after { + content: ""; + position: absolute; +} +.book7:before { + height: 40px; + width: 100px; + left: 10px; + border-left: 20px double #fff; +} +.book7:after { + height: 20px; + width: 20px; + border-radius: 50%; + background: #fff; + top: 10px; + left: 170px; +} diff --git a/example/src/index.js b/example/src/index.tsx similarity index 100% rename from example/src/index.js rename to example/src/index.tsx diff --git a/example/src/react-app-env.d.ts b/example/src/react-app-env.d.ts new file mode 100644 index 0000000..6431bc5 --- /dev/null +++ b/example/src/react-app-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/example/tsconfig.json b/example/tsconfig.json new file mode 100644 index 0000000..f2850b7 --- /dev/null +++ b/example/tsconfig.json @@ -0,0 +1,25 @@ +{ + "compilerOptions": { + "target": "es5", + "lib": [ + "dom", + "dom.iterable", + "esnext" + ], + "allowJs": true, + "skipLibCheck": true, + "esModuleInterop": true, + "allowSyntheticDefaultImports": true, + "strict": true, + "forceConsistentCasingInFileNames": true, + "module": "esnext", + "moduleResolution": "node", + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "react" + }, + "include": [ + "src" + ] +} diff --git a/package-lock.json b/package-lock.json index 095fea1..bf0dd57 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6977,6 +6977,11 @@ } } }, + "html-to-image": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/html-to-image/-/html-to-image-0.1.1.tgz", + "integrity": "sha512-UAjpXmokENeOyzfLwL0+zQ502lXyg6pkzVUmRjtljOH9dR/YdEYQhWrQ/O14hmH5/1L7jv1aOupU4Zi3Y8+iow==" + }, "html-webpack-plugin": { "version": "4.0.0-beta.11", "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-4.0.0-beta.11.tgz",