react-beautiful-dragify v1.4.0

react-beautiful-dragify

A powerful, flexible, and accessible drag and drop library for React applications, alterntive of react-beautiful-dnd.

Features

✨ Core Features

• Drag and Drop between lists
• Vertical and horizontal dragging
• Touch device support
• Screen reader accessibility
• RTL support
• Auto-scrolling
• Customizable animations

🛠️ Developer Experience

• TypeScript support
• Modular architecture
• Comprehensive documentation
• Easy-to-use hooks API
• Zero external dependencies
• Small bundle size

🎨 Customization

• Custom drag handles
• Flexible styling options
• Customizable animations
• Conditional dragging/dropping
• Custom drag previews

Live Demo

Try out react-beautiful-dragify in our interactive demo:

Installation

npm install react-beautiful-dragify
# or
yarn add react-beautiful-dragify

Basic Usage

import { DragifyProvider, useDraggable, useDroppable } from 'react-beautiful-dragify';

// 1. Wrap your app with DragifyProvider
function App() {
  const handleDragEnd = (result) => {
    const { source, destination } = result;
    if (!destination) return;

    // Update your state here
    const items = Array.from(yourItems);
    const [removed] = items.splice(source.index, 1);
    items.splice(destination.index, 0, removed);
    setYourItems(items);
  };

  return (
    <DragifyProvider onDragEnd={handleDragEnd}>
      <YourDraggableList />
    </DragifyProvider>
  );
}

// 2. Create draggable items
function DraggableItem({ id, index, children }) {
  const { draggableProps, dragHandleProps } = useDraggable({
    id,
    type: 'item',
    index,
    isDragDisabled: false, // Optional
    data: {
      /* your custom data */
    }, // Optional
  });

  return (
    <div {...draggableProps}>
      <div {...dragHandleProps}>☰</div>
      {children}
    </div>
  );
}

// 3. Create droppable containers
function DroppableList({ id }) {
  const { droppableProps } = useDroppable({
    id,
    type: 'item',
    direction: 'vertical',
    isDropDisabled: false, // Optional
    isCombineEnabled: false, // Optional
    ignoreContainerClipping: false, // Optional
  });

  return <div {...droppableProps}>{/* Your draggable items */}</div>;
}

Advanced Features

Keyboard Navigation

• Space/Enter: Start dragging
• Arrow keys: Move item
• Escape: Cancel drag
• Tab: Navigate between draggable items

Touch Support

• Long press to start dragging
• Auto-scrolling on touch devices
• Touch-friendly drag handles

Accessibility

• ARIA attributes for screen readers
• Role announcements during drag operations
• Keyboard navigation support
• High-contrast focus indicators

Performance

• Optimized re-renders
• Efficient DOM updates
• Smooth animations
• Minimal layout shifts

API Reference

DragifyProvider Props

useDraggable Options

useDroppable Options

License

MIT