@dnd-kit/utilities

What is @dnd-kit/utilities?

The @dnd-kit/utilities package provides a set of utility functions and types that are designed to be used with the @dnd-kit/core package for building drag and drop interfaces. These utilities help with common tasks such as managing keyboard events, coordinates, and other drag and drop related calculations.

What are @dnd-kit/utilities's main functionalities?

Coordinates

Utilities for managing coordinates, such as calculating relative positions for drag and drop elements.

{"getRelativeTransform": (x, y) => `translate3d(${x}px, ${y}px, 0)`}

Keyboard Coordinates

Functions to handle keyboard events and convert them into coordinates for keyboard accessible drag and drop functionality.

{"keyboardCoordinates": (event) => ({x: event.clientX, y: event.clientY})}

Distance Measurement

Functions to measure the distance between two points, useful for determining drag thresholds and more.

{"distance": (x1, y1, x2, y2) => Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2))}

Other packages similar to @dnd-kit/utilities

react-dnd

React DnD is a set of React utilities to help you build complex drag and drop interfaces while keeping your components decoupled. It provides more comprehensive drag and drop context and handlers compared to @dnd-kit/utilities, which is more focused on utility functions.

react-beautiful-dnd

A higher-level abstraction specifically built for vertical and horizontal lists. Unlike @dnd-kit/utilities, which provides low-level utilities, react-beautiful-dnd offers a more opinionated solution with a focus on list reordering.

sortablejs

SortableJS is a minimalist JavaScript library for reorderable drag-and-drop lists on modern browsers and touch devices. It does not require a framework and has more out-of-the-box functionality for list reordering compared to the utility-centric approach of @dnd-kit/utilities.

README

@dnd-kit/utilities

Internal utilities to bee shared between @dnd-kit packages.