@types/react-beautiful-dnd

What is @types/react-beautiful-dnd?

The @types/react-beautiful-dnd package provides TypeScript type definitions for react-beautiful-dnd, a library that helps you create beautiful, accessible drag and drop lists with ease. These type definitions allow TypeScript developers to use react-beautiful-dnd in their projects with the benefits of type checking and IntelliSense support.

What are @types/react-beautiful-dnd's main functionalities?

Draggable

The Draggable component allows individual elements to be draggable. It requires a draggableId and an index prop. The children function provides 'provided' and 'snapshot' objects that contain the necessary props and state to control the element.

{"import { Draggable } from 'react-beautiful-dnd';\n\n<Draggable draggableId='draggable-1' index={0}>\n  {(provided, snapshot) => (\n    <div\n      ref={provided.innerRef}\n      {...provided.draggableProps}\n      {...provided.dragHandleProps}\n      style={provided.draggableProps.style}\n    >\n      Drag me!\n    </div>\n  )}\n</Draggable>"}

Droppable

The Droppable component defines an area where Draggable items can be dropped. It takes a droppableId prop and its children function provides 'provided' and 'snapshot' objects to manage the drop area.

{"import { Droppable } from 'react-beautiful-dnd';\n\n<Droppable droppableId='droppable-1'>\n  {(provided, snapshot) => (\n    <div\n      ref={provided.innerRef}\n      {...provided.droppableProps}\n    >\n      Drop items here\n      {provided.placeholder}\n    </div>\n  )}\n</Droppable>"}

DragDropContext

The DragDropContext component wraps the Draggable and Droppable components and provides a context for drag and drop operations. It takes an onDragEnd callback that is called when a drag operation is completed.

{"import { DragDropContext } from 'react-beautiful-dnd';\n\n<DragDropContext onDragEnd={handleDragEnd}>\n  {/* Draggable and Droppable components go here */}\n</DragDropContext>"}

Other packages similar to @types/react-beautiful-dnd

react-dnd

React DnD is a set of React utilities to help you build complex drag and drop interfaces while keeping components decoupled. It uses the HTML5 drag and drop API and has more setup complexity compared to react-beautiful-dnd, which abstracts away much of the complexity.

react-sortable-hoc

React Sortable HOC provides components and higher-order components to make list reordering easier. It is less feature-rich compared to react-beautiful-dnd, which offers a more comprehensive drag and drop solution with better accessibility support.

dnd-kit

Dnd Kit is a modern drag and drop toolkit for React that is built with hooks. It is more modular and flexible than react-beautiful-dnd, allowing for more customization and control over the drag and drop experience.

README

Installation

npm install --save @types/react-beautiful-dnd

Summary

This package contains type definitions for react-beautiful-dnd (https://github.com/atlassian/react-beautiful-dnd).

Details

Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-beautiful-dnd.

Additional Details

• Last updated: Thu, 28 Dec 2023 22:06:53 GMT
• Dependencies: @types/react

Credits

These definitions were written by varHarrie, Bradley Ayers, Austin Turner, Mark Nelissen, Enrico Boccadifuoco, Taeheon Kim, Kanitkorn Sujautra, Arun George, Nick Garlis, Brian Powers, and Declan Warn.