{"_id":"@anthood/use-canvas","_rev":"1-e2870fe80247db75447ccab1ab598621","name":"@anthood/use-canvas","dist-tags":{"latest":"0.0.2"},"versions":{"0.0.1":{"name":"@anthood/use-canvas","author":{"name":"John Romani","email":"john@anthood.com"},"repository":{"type":"git","url":"git+https://github.com/johnroma/use-canvas.git"},"keywords":["canvas","react","hook","sprite","sheet","sequence"],"homepage":"https://anthood.com","description":"Custom React hooks to create a sequence of images on a canvas, to be accessed as a single image. Useful for instance to create a sprite sheet from a sequence of images.","license":"MIT","private":false,"version":"0.0.1","main":"dist/index.js","module":"dist/index.mjs","types":"dist/index.d.ts","peerDependencies":{"react":"^18.2.0","react-dom":"^18.2.0"},"devDependencies":{"@types/react":"^18.2.46","@types/react-dom":"^18.2.18","@typescript-eslint/eslint-plugin":"^6.16.0","@typescript-eslint/parser":"^6.16.0","@vitejs/plugin-react":"^4.2.1","eslint":"^8.56.0","eslint-config-airbnb":"^19.0.4","eslint-config-airbnb-typescript":"^17.1.0","eslint-config-prettier":"^9.1.0","eslint-plugin-import":"^2.29.1","eslint-plugin-jsx-a11y":"^6.8.0","eslint-plugin-prettier":"^5.1.2","eslint-plugin-react":"^7.33.2","eslint-plugin-react-hooks":"^4.6.0","prettier":"^3.1.1","react":"^18.2.0","react-dom":"^18.2.0","tsup":"^8.0.1","typescript":"^5.3.3","vite":"^5.0.10"},"scripts":{"dev":"vite","build":"tsup src/index.ts --format cjs,esm --minify --dts --clean","lint":"eslint src --ext .js,.jsx,.ts,.tsx","lint:fix":"eslint src --ext .js,.jsx,.ts,.tsx --fix","format":"prettier \"src/**/*.{js,jsx,ts,tsx,css,scss}\" --write","compile":"tsc"},"bugs":{"url":"https://github.com/johnroma/use-canvas/issues"},"_id":"@anthood/use-canvas@0.0.1","_integrity":"sha512-22xeZndjZ3tkm/RYPbyPS7eeeZZSclyEe+HkZIDUeti23M4N8+W17u5NM0SvqWJU9aEO+vJcS5gN2FbjRsv4Lg==","_resolved":"/private/var/folders/wp/k_l4k41d4ls25ch1701rthpc0000gn/T/9c2eff3a300f2be2795367b3f7b703a0/anthood-use-canvas-0.0.1.tgz","_from":"file:anthood-use-canvas-0.0.1.tgz","_nodeVersion":"20.5.0","_npmVersion":"9.8.0","dist":{"integrity":"sha512-22xeZndjZ3tkm/RYPbyPS7eeeZZSclyEe+HkZIDUeti23M4N8+W17u5NM0SvqWJU9aEO+vJcS5gN2FbjRsv4Lg==","shasum":"a644a85f269323ac9ab3018b5bd6b023348568cf","tarball":"https://registry.npmjs.org/@anthood/use-canvas/-/use-canvas-0.0.1.tgz","fileCount":7,"unpackedSize":7518,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC9W4rCu11pI7s5voIBOHtbt0FwSe0m1vm2705uMO3dFAIgNpqH8m3IMarzxxLQ4rT6ooHVYiS2F1rsiHDmtxPX82E="}]},"_npmUser":{"name":"anthood","email":"admin@anthood.com"},"directories":{},"maintainers":[{"name":"anthood","email":"admin@anthood.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/use-canvas_0.0.1_1710279428677_0.7410901783935644"},"_hasShrinkwrap":false},"0.0.2":{"name":"@anthood/use-canvas","author":{"name":"John Romani","email":"john@anthood.com"},"repository":{"type":"git","url":"git+https://github.com/johnroma/use-canvas.git"},"keywords":["canvas","react","hook","sprite","sheet","sequence"],"homepage":"https://anthood.com","description":"Custom React hooks to create a sequence of images on a canvas, to be accessed as a single image. Useful for instance to create a sprite sheet from a sequence of images.","license":"MIT","private":false,"version":"0.0.2","main":"dist/index.js","module":"dist/index.mjs","types":"dist/index.d.ts","peerDependencies":{"react":"^18.2.0","react-dom":"^18.2.0"},"devDependencies":{"@types/react":"^18.2.46","@types/react-dom":"^18.2.18","@typescript-eslint/eslint-plugin":"^6.16.0","@typescript-eslint/parser":"^6.16.0","@vitejs/plugin-react":"^4.2.1","eslint":"^8.56.0","eslint-config-airbnb":"^19.0.4","eslint-config-airbnb-typescript":"^17.1.0","eslint-config-prettier":"^9.1.0","eslint-plugin-import":"^2.29.1","eslint-plugin-jsx-a11y":"^6.8.0","eslint-plugin-prettier":"^5.1.2","eslint-plugin-react":"^7.33.2","eslint-plugin-react-hooks":"^4.6.0","prettier":"^3.1.1","react":"^18.2.0","react-dom":"^18.2.0","tsup":"^8.0.1","typescript":"^5.3.3","vite":"^5.0.10"},"scripts":{"dev":"vite","build":"tsup src/index.ts --format cjs,esm --minify --dts --clean","lint":"eslint src --ext .js,.jsx,.ts,.tsx","lint:fix":"eslint src --ext .js,.jsx,.ts,.tsx --fix","format":"prettier \"src/**/*.{js,jsx,ts,tsx,css,scss}\" --write","compile":"tsc"},"bugs":{"url":"https://github.com/johnroma/use-canvas/issues"},"_id":"@anthood/use-canvas@0.0.2","_integrity":"sha512-+QXHYVvnLmzAZs6PJ2JM7SvMS/pEoEA1ZRosjceIalBdU59THzsJmwQEqzF5DDE/sCnhqiUtkpo8OoO9/aOYJw==","_resolved":"/private/var/folders/wp/k_l4k41d4ls25ch1701rthpc0000gn/T/6247864087d9e37d3b8d871e37076ddd/anthood-use-canvas-0.0.2.tgz","_from":"file:anthood-use-canvas-0.0.2.tgz","_nodeVersion":"20.5.0","_npmVersion":"9.8.0","dist":{"integrity":"sha512-+QXHYVvnLmzAZs6PJ2JM7SvMS/pEoEA1ZRosjceIalBdU59THzsJmwQEqzF5DDE/sCnhqiUtkpo8OoO9/aOYJw==","shasum":"b3201fe193a0e53e36d5612a4c3aa1ca33f0bcbb","tarball":"https://registry.npmjs.org/@anthood/use-canvas/-/use-canvas-0.0.2.tgz","fileCount":7,"unpackedSize":7632,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCr6FOHnupn98516sWT9R1gaqihhpKIny+O00GMgvW2nQIgNBjP8/B/wzLJ5XCGqULdMIleTDRsAbTqTXeumueZUvc="}]},"_npmUser":{"name":"anthood","email":"admin@anthood.com"},"directories":{},"maintainers":[{"name":"anthood","email":"admin@anthood.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/use-canvas_0.0.2_1710980297011_0.7375492338540013"},"_hasShrinkwrap":false}},"time":{"created":"2024-03-12T21:37:08.548Z","0.0.1":"2024-03-12T21:37:08.835Z","modified":"2024-03-21T00:18:18.023Z","0.0.2":"2024-03-21T00:18:17.163Z"},"maintainers":[{"name":"anthood","email":"admin@anthood.com"}],"description":"Custom React hooks to create a sequence of images on a canvas, to be accessed as a single image. Useful for instance to create a sprite sheet from a sequence of images.","homepage":"https://anthood.com","keywords":["canvas","react","hook","sprite","sheet","sequence"],"repository":{"type":"git","url":"git+https://github.com/johnroma/use-canvas.git"},"author":{"name":"John Romani","email":"john@anthood.com"},"bugs":{"url":"https://github.com/johnroma/use-canvas/issues"},"license":"MIT","readme":"# Collection of react hooks to deal with canvas.\n\n## useCanvasSequence\n\nJust import the hook and use in your react component.\nMake sure to supply it with a canvas element, and an array of img-src's.\n\nYou can now call render with any frame to display.\n\n## demo\n\n[See it](https://john.ro/lab/canvas-frames) in action connected to a scroll-listener from framer-motion\n\n```jsx\nimport { useCanvasSequence } from  \"@anthood/use-canvas\"\n\nfunction MyComponent() {\n    const canvasRef = useRef<HTMLCanvasElement>(null)\n    const { images, allImagesLoaded, render } = useCanvasSequence(canvasRef.current,sequence)\n\n    const onSliderChange = (value: number): void => {\n    const ctx = canvasRef.current?.getContext(\"2d\")\n    if (ctx) render(images[value], ctx)\n  }\n\n    return <canvas ref={canvasRef} />\n}\n```\n","readmeFilename":"README.md"}