react-beautiful-dnd
Implementar reordenación de listas con drag and drop en React manteniendo accesibilidad de teclado.
Drag and drop para listas en React con animaciones físicas naturales y accesibilidad completa. Creado por Atlassian para Jira y Trello.
Notas y contexto
Qué es
react-beautiful-dnd es la librería de drag and drop más conocida del ecosistema React. Desarrollada internamente por Atlassian y usada en producción en Jira y Trello. Destaca por sus animaciones fluidas que simulan física real y por ser completamente accesible con teclado y lectores de pantalla.
Para qué sirve
- Crear listas reordenables con drag and drop.
- Implementar tableros Kanban con columnas y tarjetas arrastrables.
- Mover elementos entre listas distintas.
- Ofrecer reordenación accesible a usuarios que no pueden usar el ratón.
Cuándo usarlo
Cuando necesitas drag and drop en listas y la accesibilidad es un requisito. Es la opción más madura y probada en producción para casos de uso tipo Kanban, to-do lists o listas de configuración reordenables.
Puntos clave
- Accesibilidad completa: funciona con teclado, anuncia cambios a lectores de pantalla.
- Animaciones con física natural que hacen la interacción más intuitiva.
- Soporte para listas verticales, horizontales y movimiento entre listas.
- API declarativa basada en render props.
Ten en cuenta
El proyecto está en modo de mantenimiento desde 2022: Atlassian lo usa internamente pero no añade features nuevas. Para casos de uso más complejos (grids, virtualización) puede ser insuficiente. dnd-kit es la alternativa moderna si necesitas más flexibilidad.