cdejs
Version:
CanvasDotEffect is a lightweight JS library that helps create customizable and interactive dot-based effects using the Canvas API
2 lines • 2.68 kB
JavaScript
import{exec}from"child_process";import{writeFileSync}from"fs";import{join}from"path";import{createInterface}from"readline";const destination=process.cwd();writeFileSync(join(destination,"CDECanvas.jsx"),'import {forwardRef, useEffect, useImperativeHandle, useRef} from "react"\nimport {Canvas, CDEUtils} from "cdejs"\n\n/**\n * HOW TO USE:\n * \n * 1. Add the <CDECanvas/> component at the root of your target element.\n * 2. If necessary, create a ref and link it to your <CDECanvas ref={*yourRef*}/> component to access some utility functions of the canvas. (See the imperativeHandle bellow)\n * 3. Create your declarations and interactions and build cool effects!\n * \n * PARAMETERS:\n * - declarations -> A callback containing the setup/declaration of all canvas obj and if applicable, adding them to the canvas. (CVS)=>{...}\n * - interactions -> A callback containing the desired built-in input device listeners. (CVS)=>{...}\n * - isStatic -> If true, initializes the canvas as static.\n * - loopingCB, fpsLimit, cvsFrame, settings, willReadFrequently -> see https://github.com/Louis-CharlesBiron/canvasDotEffect?#canvas\n */\nexport const CDECanvas = forwardRef(({declarations, interactions, isStatic, loopingCB, fpsLimit, cvsFrame, settings, willReadFrequently}, ref)=>{\n const htmlElementCanvasRef = useRef(null), cvsInstanceRef = useRef(null)\n\n // Utility canvas functions\n useImperativeHandle(ref, ()=>({\n getCVS:()=>cvsInstanceRef.current,\n adjustSize:()=>cvsInstanceRef.current.setSize()\n }))\n\n useEffect(()=>{\n const CVS = new Canvas(htmlElementCanvasRef.current, loopingCB, fpsLimit, cvsFrame, settings, willReadFrequently)\n cvsInstanceRef.current = CVS\n\n // Setup canvas objects and listeners\n if (CDEUtils.isFunction(declarations)) declarations(CVS)\n if (CDEUtils.isFunction(interactions)) interactions(CVS)\n \n // Start\n if (isStatic) CVS.initializeStatic()\n else CVS.start()\n\n // On unmount\n return ()=>CVS.stop()\n }, [])\n\n return <canvas ref={htmlElementCanvasRef}></canvas>\n})'),console.log("Default CDECanvas React component successfully created at '"+join(destination,"CDECanvas.jsx")+"'!\n");const cli=createInterface({input:process.stdin,output:process.stdout});function close(e){e.close(),console.log("")}cli.question("Open in explorer [Y/N]? ",(e=>{const n=e?.toLowerCase()?.trim();"code"==n?exec("code --new-window "+destination):n&&!["y","yes","ye","ok","for sure"].includes(n)||exec("explorer "+destination),close(cli)})),process.stdin.on("keypress",((e,n)=>{"escape"==n.name&&close(cli)}));