Socket
Socket
Sign inDemoInstall

@dnd-kit/core

Package Overview
Dependencies
8
Maintainers
1
Versions
129
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@dnd-kit/core

dnd kit – a lightweight React library for building performant and accessible drag and drop experiences


Version published
Maintainers
1
Weekly downloads
1,302,625
decreased by-0.38%

Weekly downloads

Package description

What is @dnd-kit/core?

The @dnd-kit/core package provides a comprehensive set of tools for building complex drag and drop interfaces with ease. It is designed to be highly customizable and extensible, allowing developers to implement a wide range of drag and drop scenarios, from simple list reordering to complex nested structures and beyond. The core package focuses on providing the fundamental building blocks for drag and drop functionality, leaving UI and styling decisions up to the developer.

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

Basic Drag and Drop

This feature allows for the implementation of basic drag and drop functionality within your application. The DndContext component is used to wrap around the draggable elements, providing the necessary context for drag and drop interactions.

{"import {DndContext} from '@dnd-kit/core';

function App() {
  return (
    <DndContext>
      {/* Your draggable items here */}
    </DndContext>
  );
}"}

Sorting

This feature enables sorting functionality within a list of items. By using the DndContext in combination with sensors and a sorting utility function like arrayMove, developers can easily implement draggable lists where items can be reordered.

{"import {DndContext, useSensor, PointerSensor} from '@dnd-kit/core';
import {arrayMove} from '@dnd-kit/sortable';

function App() {
  const sensors = [useSensor(PointerSensor)];

  const handleDragEnd = (event) => {
    const {active, over} = event;

    if (active.id !== over.id) {
      setItems((items) => {
        const oldIndex = items.findIndex((item) => item.id === active.id);
        const newIndex = items.findIndex((item) => item.id === over.id);

        return arrayMove(items, oldIndex, newIndex);
      });
    }
  };

  return (
    <DndContext sensors={sensors} onDragEnd={handleDragEnd}>
      {/* Your sortable items here */}
    </DndContext>
  );
}"}

Other packages similar to @dnd-kit/core

Readme

Source

@dnd-kit/core

Stable release

@dnd-kit – a lightweight React library for building performant and accessible drag and drop experiences.

Installation

To get started, install the @dnd-kit/core package via npm or yarn:

npm install @dnd-kit/core

Usage

Visit docs.dndkit.com to learn how to get started with @dnd-kit.

FAQs

Last updated on 06 Nov 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc