# @dnd-kit/modifiers

> Translate modifier presets for use with `@dnd-kit` packages.

Latest version **9.0.0** (published 2024-12-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install @dnd-kit/modifiers
pnpm add @dnd-kit/modifiers
yarn add @dnd-kit/modifiers
bun add @dnd-kit/modifiers
```

## Health

**Score 60/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities; high maintenance score; high quality score; popular repo.

Warnings: low downloads.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 9.0.0 |
| Published | 2024-12-04 |
| First published | 2021-01-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 47.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 17643 |
| Author | Claudéric Demers |
| Maintainers | clauderic |

## Links

- npm: https://www.npmjs.com/package/@dnd-kit/modifiers
- Repository: https://github.com/clauderic/dnd-kit
- Homepage: https://github.com/clauderic/dnd-kit#readme
- Issues: https://github.com/clauderic/dnd-kit/issues
- npm.io page: https://npm.io/package/@dnd-kit/modifiers

## Dependencies (2)

- [tslib](https://npm.io/package/tslib.md) ^2.0.0
- [@dnd-kit/utilities](https://npm.io/package/@dnd-kit/utilities.md) ^3.2.2

## Recent versions

- 9.0.0 (latest) — 2024-12-04
- 9.0.0-next-202410244445 (next) — 2024-11-24
- 8.0.0 — 2024-11-23
- 8.0.0-next-20241023165632 — 2024-11-23
- 8.0.0-next-20241023161720 — 2024-11-23
- 8.0.0-next-2024102316167 — 2024-11-23
- 8.0.0-next-2024102314261 — 2024-11-23
- 8.0.0-next-20241023141346 — 2024-11-23
- 8.0.0-next-20241023141325 — 2024-11-23
- 7.0.0 — 2023-11-06
- 7.0.0-next-2023106221355 — 2023-11-06
- 7.0.0-next-202310621567 — 2023-11-06
- 7.0.0-next-2023106211358 — 2023-11-06
- 6.0.1 — 2022-12-07
- 6.0.1-next-2022102925547 — 2022-11-29
- … 87 more at https://npm.io/package/@dnd-kit/modifiers/versions

## README

# @dnd-kit/modifiers

[![Stable release](https://img.shields.io/npm/v/@dnd-kit/modifiers.svg)](https://npm.im/@dnd-kit/sortable)

Modifiers 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:

- Restricting motion to a single axis
- Restricting motion to the draggable node container's bounding rectangle
- Restricting motion to the draggable node's scroll container bounding rectangle
- Applying resistance or clamping the motion

## Installation

To start using modifiers, install the modifiers package via yarn or npm:

```
npm install @dnd-kit/modifiers
```

## Usage

The modifiers repository contains a number of useful modifiers that can be applied on `DndContext` as well as `DragOverlay`.

```jsx
import {DndContext, DragOverlay} from '@dnd-kit';
import {
  restrictToVerticalAxis,
  restrictToWindowEdges,
} from '@dnd-kit/modifiers';

function App() {
  return (
    <DndContext modifiers={[restrictToVerticalAxis]}>
      {/* ... */}
      <DragOverlay modifiers={[restrictToWindowEdges]}>{/* ... */}</DragOverlay>
    </DndContext>
  );
}
```

As you can see from the example above, `DndContext` and `DragOverlay` can both have different modifiers.

## Built-in modifiers

### Restricting motion to an axis

#### `restrictToHorizontalAxis`

Restrict movement to only the horizontal axis.

#### `restrictToVerticalAxis`

Restrict movement to only the vertical axis.

### Restrict motion to a container's bounding rectangle

#### `restrictToWindowEdges`

Restrict 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.

#### `restrictToParentElement`

Restrict movement to the parent element of the draggable item that is picked up.

#### `restrictToFirstScrollableAncestor`

Restrict movement to the first scrollable ancestor of the draggable item that is picked up.

### Snap to grid

#### `createSnapModifier`

Function to create modifiers to snap to a given grid size.

```javascript
import {createSnapModifier} from '@dnd-kit/modifiers';

const gridSize = 20; // pixels
const snapToGridModifier = createSnapModifier(gridSize);
```

### Snap to cursor

#### `snapCenterToCursor`

Snaps the center of the draggable item to the cursor when it is picked up. Has no effect when using the Keyboard sensor.

## Building custom modifiers

To build your own custom modifiers, refer to the implementation of the built-in modifiers of this package.

For example, here is an implementation to create a modifier to snap to grid:

```javascript
const gridSize = 20;

function snapToGrid(args) {
  const {transform} = args;

  return {
    ...transform,
    x: Math.ceil(transform.x / gridSize) * gridSize,
    y: Math.ceil(transform.y / gridSize) * gridSize,
  };
}
```

---
_Source: https://npm.io/package/@dnd-kit/modifiers · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._