# React Beautiful Dnd

> Traditionally drag and drop interactions have been exclusively a mouse or touch interaction. This library has invested a huge amount of effort to ensure that everybody has access to drag and drop inte

## Pages

- [Accessibility ♿️](about-accessibility.md): Traditionally drag and drop interactions have been exclusively a mouse or touch interaction. This library has investe...
- [Carefully designed animations](about-animations.md): With things moving a lot it would be easy for the user to become distracted by the animations or for them to get in t...
- [Browser support 🌍](about-browser-support.md): This library supports the standard [Atlassian supported browsers](https://confluence.atlassian.com/cloud/supported-br...
- [Design principles 📖](about-design-principles.md): This page goes over the design and interaction thinking behind`react-beautiful-dnd`.
- [Examples 🎉](about-examples.md): See how beautiful it is for yourself!
- [Installation](about-installation.md): 1. Add the`react-beautiful-dnd`package
- [`<DragDropContext />`](api-drag-drop-context.md): In order to use drag and drop, you need to have the part of your`React`tree that you want to be able to use drag an...
- [`<Draggable />`](api-draggable.md): ``components can be dragged around and dropped onto``s. A``must always be ...
- [`<Droppable />`](api-droppable.md): ``components can be **dropped on by a``**. They also **contain**``s. A`<Dr...
- [`resetServerContext`](api-reset-server-context.md): The`resetServerContext`function should be used when server side rendering (SSR). It ensures context state does not ...
- [Auto scrolling](guides-auto-scrolling.md): When a user drags a``near the edge of a _container_ we automatically scroll the container as we are ab...
- [Avoiding image flickering](guides-avoiding-image-flickering.md): Often all you need to do is close your browsers dev tools! See 'HTTP cache headers below'
- [Browser focus](guides-browser-focus.md): "You got to focus on what's real, man" - [Jake from Adventure time](https://www.youtube.com/watch?v=TFGz6Qvg1CE)
- [Changes while dragging](guides-changes-while-dragging.md): For virtual list support see our [virtual list pattern](/docs/patterns/virtual-lists.md)
- [Combining](guides-combining.md): 👶 This feature is still quite young. We wanted to get it out there for people to play with
- [Common setup issues](guides-common-setup-issues.md): This is a little guide to help you with some common setup issues
- [Content Security Policy](guides-content-security-policy.md): This page is to help you get around the CSP error: "Refused to apply inline style because it violates the following C...
- [Use the html5 `doctype`](guides-doctype.md): Be sure that you have specified the html5`doctype`([Document Type Definition - DTD](https://developer.mozilla.org/e...
- [Dragging `<svg>`s](guides-dragging-svgs.md): Summary:`react-beautiful-dnd`does not support the usage of``(`SVGElement`) for a``or it's _dr...
- [Drop animation](guides-drop-animation.md): Out of the box we provide a beautiful drop animation for you to use. We have worked hard to create an experience that...
- [How we detect scroll containers](guides-how-we-detect-scroll-containers.md): Generally you will not need to read this guide 😊. Detection of scroll containers "should just work". However, if you ...
- [How we use DOM events](guides-how-we-use-dom-events.md): This page details how we use DOM input events, what we do with them, and how you can build things on top of our usage...
- [Identifiers (ids)](guides-identifiers.md): `> draggableId`and`> droppableId`
- [Preset styles](guides-preset-styles.md): We apply a number of **non-visible** styles to facilitate the dragging experience. We do this using combination of st...
- [Reparenting a `<Draggable />`](guides-reparenting.md): There are situations were you want to change the parent element of the dragging item while a drag is occurring. There...
- [Responders](guides-responders.md): `> Responders`
- [Screen reader guide](guides-screen-reader.md): Because great features should be accessible for everyone
- [When things mess up](guides-setup-problem-detection-and-error-recovery.md): "People make mistakes. It's all a part of growing up and you never really stop growing" - [Duke of nuts (Adventure ti...
- [Types](guides-types.md): `react-beautiful-dnd`is typed using [`flowtype`](https://flow.org). This greatly improves internal consistency withi...
- [Using `innerRef`](guides-using-inner-ref.md): If you have not used`ref`'s before, please take a look at the [`React`: Refs and the DOM guide](https://reactjs.org/...
- [Multi drag](patterns-multi-drag.md): This page is designed to guide you through adding your own multi drag experience to your`react-beautiful-dnd`lists.
- [Tables](patterns-tables.md): | Benefits of using``| Provider |
- [Virtual lists](patterns-virtual-lists.md): `react-beautiful-dnd`supports drag and drop within and between virtual lists. This lets you have fantastic performan...
- [Keyboard dragging](sensors-keyboard.md): `react-beautiful-dnd`supports dragging with only a keyboard. We have audited how our keyboard shortcuts interact wit...
- [Mouse dragging](sensors-mouse.md): When a user presses the mouse down on an element, we cannot determine if the user was clicking or dragging. Also, som...
- [Sensor API 🎮](sensors-sensor-api.md): With our Sensor API it is possible to:
- [Touch dragging](sensors-touch.md): `react-beautiful-dnd`supports dragging on touch devices such as mobiles and tablets.
- [Community and addons](support-community-and-addons.md): - [kanban-dnd](https://kanban-dnd.glitch.me) - A Kanban style to-do list, with the ability to create custom lanes and...
- [Engineering health](support-engineering-health.md): This codebase is typed with [flow](https://flow.org) to promote greater internal consistency and more resilient code.
- [Media](support-media.md): This page contains a list of articles, blogs and newsletters that`react-beautiful-dnd`has appeared in.
- [Upgrading](support-upgrading.md): We have created upgrade instructions in our [Github release notes](https://github.com/atlassian/react-beautiful-dnd/r...