{"_id":"@alissavrk/dnd-kit-modifiers","_rev":"1-52c2a7f2928141522847070e4381bd97","name":"@alissavrk/dnd-kit-modifiers","dist-tags":{"latest":"7.0.0"},"versions":{"6.0.1":{"name":"@alissavrk/dnd-kit-modifiers","version":"6.0.1","description":"Translate modifier presets for use with `@dnd-kit` packages.","author":{"name":"Claudéric Demers"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/alissaVrk/dnd-kit.git","directory":"packages/modifiers"},"scripts":{"start":"tsdx watch --tsconfig tsconfig.build.json --verbose --noClean","build":"tsdx build --tsconfig tsconfig.build.json","test":"tsdx test","lint":"tsdx lint","prepublish":"npm run build"},"main":"dist/index.js","module":"dist/modifiers.esm.js","typings":"dist/index.d.ts","dependencies":{"@dnd-kit/utilities":"^3.2.1","tslib":"^2.0.0"},"peerDependencies":{"@dnd-kit/core":"^6.0.6","react":">=16.8.0"},"devDependencies":{"@dnd-kit/core":"^6.0.6"},"publishConfig":{"access":"public"},"gitHead":"3a4553af8a2d8fd07514f2b1f60429a0ddeb8b45","bugs":{"url":"https://github.com/alissaVrk/dnd-kit/issues"},"homepage":"https://github.com/alissaVrk/dnd-kit#readme","_id":"@alissavrk/dnd-kit-modifiers@6.0.1","_nodeVersion":"18.1.0","_npmVersion":"8.8.0","dist":{"integrity":"sha512-QHTdNK/OW5XTKVYTtvnIq9l/hiIXe5XZ27FdCY9nKvaEn9BnRsPze/kaSdzvPYmlXXGBCv8QUR/xbSsJrg0C8Q==","shasum":"934071f15b2d6cfb8767fb3fac6cdc8d12721c36","tarball":"https://registry.npmjs.org/@alissavrk/dnd-kit-modifiers/-/dnd-kit-modifiers-6.0.1.tgz","fileCount":21,"unpackedSize":47656,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFYOkJAbp6IsklmB6/8gPC8NtbB1HFBKAXnqpeX9KMNkAiAzhdRvZTIqziYVb5opI2RnsEY0RYefsz29SzRdAj/UgA=="}]},"_npmUser":{"name":"alissavrk","email":"alissa.vrk@gmail.com"},"directories":{},"maintainers":[{"name":"alissavrk","email":"alissa.vrk@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/dnd-kit-modifiers_6.0.1_1691136570969_0.2906734311508923"},"_hasShrinkwrap":false},"7.0.0":{"name":"@alissavrk/dnd-kit-modifiers","version":"7.0.0","description":"Translate modifier presets for use with `@dnd-kit` packages.","author":{"name":"Claudéric Demers"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/alissaVrk/dnd-kit.git","directory":"packages/modifiers"},"scripts":{"start":"tsdx watch --tsconfig tsconfig.build.json --verbose --noClean","build":"tsdx build --tsconfig tsconfig.build.json","test":"tsdx test","lint":"tsdx lint","prepublish":"npm run build"},"main":"dist/index.js","module":"dist/modifiers.esm.js","typings":"dist/index.d.ts","dependencies":{"@alissavrk/dnd-kit-utilities":"^4.0.0","tslib":"^2.0.0"},"peerDependencies":{"@alissavrk/dnd-kit-core":"^7.0.0","react":">=16.8.0"},"devDependencies":{"@alissavrk/dnd-kit-core":"^7.0.0"},"publishConfig":{"access":"public"},"gitHead":"4f3993d3f12c49ab77085cf0046b5492083939c4","bugs":{"url":"https://github.com/alissaVrk/dnd-kit/issues"},"homepage":"https://github.com/alissaVrk/dnd-kit#readme","_id":"@alissavrk/dnd-kit-modifiers@7.0.0","_nodeVersion":"16.19.0","_npmVersion":"8.19.3","dist":{"integrity":"sha512-prR5wdk5erhicYMCD4wfjcEvzAawMmQ7xn58RuLs9GiwSSye8g30tP6VUhGby5saIwmT1geSOS/pLX8t5WXPsQ==","shasum":"87e97ef650cb40a6c292f64e4259259200ecdb38","tarball":"https://registry.npmjs.org/@alissavrk/dnd-kit-modifiers/-/dnd-kit-modifiers-7.0.0.tgz","fileCount":21,"unpackedSize":48463,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDRNZa1bhP0N/NPPZv5taTj9w53+3DRcCAszWMMcB+wzAIgEnZ47HvPM8iHhwqUjkPhVuR/gi4kb+OGAM0sXsEioHc="}]},"_npmUser":{"name":"alissavrk","email":"alissa.vrk@gmail.com"},"directories":{},"maintainers":[{"name":"alissavrk","email":"alissa.vrk@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/dnd-kit-modifiers_7.0.0_1691143843610_0.17304951190233298"},"_hasShrinkwrap":false}},"time":{"created":"2023-08-04T08:09:30.910Z","6.0.1":"2023-08-04T08:09:31.103Z","modified":"2023-08-04T10:10:43.840Z","7.0.0":"2023-08-04T10:10:43.745Z"},"maintainers":[{"name":"alissavrk","email":"alissa.vrk@gmail.com"}],"description":"Translate modifier presets for use with `@dnd-kit` packages.","homepage":"https://github.com/alissaVrk/dnd-kit#readme","repository":{"type":"git","url":"git+https://github.com/alissaVrk/dnd-kit.git","directory":"packages/modifiers"},"author":{"name":"Claudéric Demers"},"bugs":{"url":"https://github.com/alissaVrk/dnd-kit/issues"},"license":"MIT","readme":"# @dnd-kit/modifiers\n\n[![Stable release](https://img.shields.io/npm/v/@dnd-kit/modifiers.svg)](https://npm.im/@dnd-kit/sortable)\n\nModifiers let you dynamically modify the movement coordinates that are detected by sensors. They can be used for a wide range of use cases, for example:\n\n- Restricting motion to a single axis\n- Restricting motion to the draggable node container's bounding rectangle\n- Restricting motion to the draggable node's scroll container bounding rectangle\n- Applying resistance or clamping the motion\n\n## Installation\n\nTo start using modifiers, install the modifiers package via yarn or npm:\n\n```\nnpm install @dnd-kit/modifiers\n```\n\n## Usage\n\nThe modifiers repository contains a number of useful modifiers that can be applied on `DndContext` as well as `DragOverlay`.\n\n```jsx\nimport {DndContext, DragOverlay} from '@dnd-kit';\nimport {\n  restrictToVerticalAxis,\n  restrictToWindowEdges,\n} from '@dnd-kit/modifiers';\n\nfunction App() {\n  return (\n    <DndContext modifiers={[restrictToVerticalAxis]}>\n      {/* ... */}\n      <DragOverlay modifiers={[restrictToWindowEdges]}>{/* ... */}</DragOverlay>\n    </DndContext>\n  );\n}\n```\n\nAs you can see from the example above, `DndContext` and `DragOverlay` can both have different modifiers.\n\n## Built-in modifiers\n\n### Restricting motion to an axis\n\n#### `restrictToHorizontalAxis`\n\nRestrict movement to only the horizontal axis.\n\n#### `restrictToVerticalAxis`\n\nRestrict movement to only the vertical axis.\n\n### Restrict motion to a container's bounding rectangle\n\n#### `restrictToWindowEdges`\n\nRestrict movement to the edges of the window. This modifier can be useful to prevent the `DragOverlay` from being moved outside of the bounds of the window.\n\n#### `restrictToParentElement`\n\nRestrict movement to the parent element of the draggable item that is picked up.\n\n#### `restrictToFirstScrollableAncestor`\n\nRestrict movement to the first scrollable ancestor of the draggable item that is picked up.\n\n### Snap to grid\n\n#### `createSnapModifier`\n\nFunction to create modifiers to snap to a given grid size.\n\n```javascript\nimport {createSnapModifier} from '@dnd-kit/modifiers';\n\nconst gridSize = 20; // pixels\nconst snapToGridModifier = createSnapModifier(gridSize);\n```\n\n### Snap to cursor\n\n#### `snapCenterToCursor`\n\nSnaps the center of the draggable item to the cursor when it is picked up. Has no effect when using the Keyboard sensor.\n\n## Building custom modifiers\n\nTo build your own custom modifiers, refer to the implementation of the built-in modifiers of this package.\n\nFor example, here is an implementation to create a modifier to snap to grid:\n\n```javascript\nconst gridSize = 20;\n\nfunction snapToGrid(args) {\n  const {transform} = args;\n\n  return {\n    ...transform,\n    x: Math.ceil(transform.x / gridSize) * gridSize,\n    y: Math.ceil(transform.y / gridSize) * gridSize,\n  };\n}\n```\n","readmeFilename":"README.md"}