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
• Well maintained

API Reference

DragifyProvider Props

| Prop | Type | Description | | ----------- | ---------------------------- | --------------------------------------------- | | onDragEnd | (result: DropResult) => void | Required. Called when a drag operation ends | | onDragStart | (start: DragStart) => void | Optional. Called when a drag operation starts | | children | ReactNode | Your app content |

useDraggable Options

| Option | Type | Description | | -------------- | ------- | ----------------------------------- | | id | string | Unique identifier for the draggable | | type | string | Type identifier for drag operations | | index | number | Position in the list | | isDragDisabled | boolean | Disable dragging for this item | | data | any | Custom data to be passed |

useDroppable Options

| Option | Type | Description | | ---------------- | -------------------------- | ----------------------------------- | | id | string | Unique identifier for the droppable | | type | string | Accepted draggable types | | direction | 'vertical' | 'horizontal' | List orientation | | isDropDisabled | boolean | Disable dropping in this container | | isCombineEnabled | boolean | Enable item combining |

License

MIT