useDnDRestrictToRefElement

Ce hook facilite la création d'une zone de restriction pour les opérations de Drag and Drop (DnD) en utilisant la bibliothèque @dnd-kit. Il fournit un modifier qui empêche un élément déplacé de sortir des limites du conteneur référencé.

Retour du hook

Le hook retourne un objet contenant :

Propriété	Type	Description
ref	RefObject<any>	Référence React à attacher au conteneur qui délimite la zone de DnD
restrictToRefElement	Modifier	Modifier @dnd-kit à passer au contexte DndContext

Utilisation basique

import useDnDRestrictToRefElement from '@/hooks/use-dnd-restrict-to-ref-el';
import { DndContext } from '@dnd-kit/core';

export default function Component() {
  const { ref, restrictToRefElement } = useDnDRestrictToRefElement();

  return (
    <div ref={ref} style={{ width: '400px', height: '300px', border: '2px solid blue' }}>
      <DndContext modifiers={[restrictToRefElement]}>
        {/* Vos éléments draggables ici */}
      </DndContext>
    </div>
  );
}

Fonctionnement

1. Obtention des dimensions : Le hook récupère les coordonnées du conteneur via getBoundingClientRect()
2. Calcul des limites : Lorsqu'un élément est déplacé, le modifier calcule les limites de la boîte englobante
3. Restriction du mouvement : Le transform est ajusté pour empêcher l'élément de dépasser les bordures du conteneur
4. Retour du transform : Le modifier retourne le transform restreint ou inchangé selon les conditions

Points importants

• ⚠️ Le conteneur doit avoir une ref valide pour que le hook fonctionne correctement
• ⚠️ Le conteneur doit avoir des dimensions définies (largeur et hauteur)
• ℹ️ Ce hook est basé sur l'implémentation officielle de dnd-kit : restrictToBoundingRect
• ℹ️ Compatible avec tous les modifiers @dnd-kit existants

Sources

• Documentation officielle @dnd-kit : https://docs.dnd-kit.com/
• Implémentation source : https://github.com/clauderic/dnd-kit/blob/master/packages/modifiers/src/utilities/restrictToBoundingRect.ts