{"_id":"@amit.rajput/react-infinite-canvas","name":"@amit.rajput/react-infinite-canvas","dist-tags":{"latest":"1.1.0"},"versions":{"1.1.0":{"name":"@amit.rajput/react-infinite-canvas","version":"1.1.0","description":"An Infinite Canvas Component for React where you can place your component anywhere on the canvas with zoom in, zoom out and panning functionality. It also supports custom components to control the canvas.","main":"./dist/react-infinite-canvas.umd.js","module":"./dist/react-infinite-canvas.es.js","types":"./dist/main.d.ts","scripts":{"build":"vite build","dev":"vite","test":"echo \"Error: no test specified\" && exit 1"},"exports":{"import":"./dist/react-infinite-canvas.es.js","require":"./dist/react-infinite-canvas.umd.js","types":"./dist/main.d.ts","default":"./dist/react-infinite-canvas.es.js"},"lint-staged":{"*.{js,jsx,ts,tsx,json}":["biome check --no-errors-on-unmatched --files-ignore-unknown=true"]},"keywords":["infinite","canvas","workflow","diagram","space","react","typescript","css modules","vite","component","integration"],"engines":{"node":">=20.19.0"},"author":{"name":"Karthik Aravind"},"license":"MIT","peerDependencies":{"react":">=17 <20","react-dom":">=17 <20"},"devDependencies":{"@biomejs/biome":"1.9.3","@semantic-release/changelog":"^6.0.3","@semantic-release/git":"^10.0.1","@semantic-release/github":"^11.0.1","@semantic-release/npm":"^12.0.1","@types/d3-selection":"^3.0.10","@types/d3-transition":"^3.0.9","@types/d3-zoom":"^3.0.8","@types/react":">=17 <20","@types/react-dom":">=17 <20","@vitejs/plugin-react":"4.3.4","d3-selection":"3.0.0","d3-zoom":"3.0.0","semantic-release":"^24.2.3","typescript":"^5.2.2","vite":"6.2.3","vite-plugin-css-injected-by-js":"3.5.2","vite-plugin-dts":"4.5.3"},"repository":{"type":"git","url":"git+https://github.com/amitrajput1992/infinite-canvas.git"},"dependencies":{"prettier":"^3.5.3"},"_id":"@amit.rajput/react-infinite-canvas@1.1.0","gitHead":"10b2d5228c8d6f124c5e9e10c78cd53194a46c4d","bugs":{"url":"https://github.com/amitrajput1992/infinite-canvas/issues"},"homepage":"https://github.com/amitrajput1992/infinite-canvas#readme","_nodeVersion":"20.19.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-4atjcW2lmws6cnu2aAfbUeYuBx5wBAHYPG/9Lu7fM8TKKVt01b9aZQp+gwmyIG34pneKqhimcPGicQJl7zDBZw==","shasum":"c4b766450b6afdd8e1359ef35e9f01db0a08613e","tarball":"https://registry.npmjs.org/@amit.rajput/react-infinite-canvas/-/react-infinite-canvas-1.1.0.tgz","fileCount":7,"unpackedSize":165385,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIBSEZqVGkhOYo+8aJagtgh+7idDNTaCUFPwH1v2VenS6AiEAmXv3j1IJEUDZ77fG2dIBCOUdb7TTYe5v3U+ahY403AA="}]},"_npmUser":{"name":"amit.rajput","email":"amitrajput123.ar@gmail.com"},"directories":{},"maintainers":[{"name":"amit.rajput","email":"amitrajput123.ar@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-infinite-canvas_1.1.0_1746803199372_0.698749050470185"},"_hasShrinkwrap":false}},"time":{"created":"2025-05-09T15:06:39.298Z","1.1.0":"2025-05-09T15:06:39.613Z","modified":"2025-05-09T15:06:39.862Z"},"maintainers":[{"name":"amit.rajput","email":"amitrajput123.ar@gmail.com"}],"description":"An Infinite Canvas Component for React where you can place your component anywhere on the canvas with zoom in, zoom out and panning functionality. It also supports custom components to control the canvas.","homepage":"https://github.com/amitrajput1992/infinite-canvas#readme","keywords":["infinite","canvas","workflow","diagram","space","react","typescript","css modules","vite","component","integration"],"repository":{"type":"git","url":"git+https://github.com/amitrajput1992/infinite-canvas.git"},"author":{"name":"Karthik Aravind"},"bugs":{"url":"https://github.com/amitrajput1992/infinite-canvas/issues"},"license":"MIT","readme":"# React-Infinite-Canvas\n\nAn Infinite Canvas Component for React where you can place your component anywhere on the canvas with zoom in, zoom out and panning functionality. It also supports custom components to control the canvas.\n\n![Screen Recording 2024-04-17 at 12 25 16 PM](https://github.com/KarthikAravindR/infinite-canvas/assets/41736896/33c9a983-0b8c-4740-95ab-4172fa9cfe55)\n\n### Contents\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n\n## Installation\n\n```sh\nnpm install react-infinite-canvas\n```\n\n## Usage\n\nStackBlitz Example: https://stackblitz.com/edit/react-infinite-canvas-workflow?file=src/App.tsx&terminal=dev\n\n```jsx\nimport { useRef } from \"react\";\nimport { ReactInfiniteCanvas, ReactInfiniteCanvasHandle } from \"react-infinite-canvas\";\n\nimport { COMPONENT_POSITIONS } from \"./helpers/constants\";\nimport ReactDOM from \"react-dom\";\n\nconst InfiniteCanvas = () => {\n const canvasRef = useRef();\n return (\n <>\n
\n {\n mountFunc.fitContentToView({ scale: 1 });\n }}\n customComponents={[\n {\n component: (\n {\n canvasRef.current?.fitContentToView({ scale: 1 });\n }}\n >\n fitToView\n \n ),\n position: COMPONENT_POSITIONS.TOP_LEFT,\n offset: { x: 120, y: 10 },\n },\n ]}\n >\n
\n asdasdsdas\n
\n \n
\n \n );\n};\n\nReactDOM.render(, document.getElementById(\"root\"));\n```\n\n## API\n\n| Property | Type | Default | Description |\n| ---------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- |\n| children | ReactNode | - | Element to be placed inside the canvas |\n| minZoom | number | 0.1 | minimum limit for zooming |\n| maxZoom | number | 4 | maximum limit for zooming |\n| panOnScroll | boolean | true | when user scrolls in canvas, instead of zooming, the content scrolls |\n| scrollBarConfig | object | { renderScrollBar: true, startingPosition: { x: 0, y: 0}, offset: { x: 0, y: 0}, color: \"grey\", thickness: \"8px\", minSize: \"15px } | To style the scrollbar to your preference |\n| customComponents | object | - | An array of components you can pass to render on canvas at any position |\n| onCanvasMount | function | - | A function that is triggered once the canvas is mounted |\n","readmeFilename":"README.md","_rev":"1-7bab159cddf6142ccbe75135968293e2"}