installation.md

Installation

General

1. Add the react-beautiful-dnd package

# yarn
yarn add react-beautiful-dnd

# npm
npm install react-beautiful-dnd --save

2. Use the package

import { DragDropContext } from 'react-beautiful-dnd';

3. Profit 🕺

React environment

In order to use react-beautiful-dnd you will probably want to have a React environment set up.

• Add react to a website - official React docs
• Setup a react environment with create-react-app - from our free getting started course

Distribution bundle

A universal module definition bundle is published on npm under the /dist folder for consumption . We publish the following files:

• dist/react-beautiful-dnd.js
• dist/react-beautiful-dnd.min.js (minified bundle)

These bundles list react as an external which needs to be provided. This is done to reduce the size of the bundle and prevent consumers from loading react multiple times. You can provide react through your module system or simply by having react on the window.

You can use the UMD to run react-beautiful-dnd directly in the browser.

<!-- peer dependency -->
<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<!-- lib (change x.x.x for the version you would like) -->
<script src="https://unpkg.com/[email protected]/dist/react-beautiful-dnd.js"></script>
<!-- needed to mount your react app -->
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>

<script>
  const React = window.React;
  const ReactDOM = window.ReactDOM;
  const { DragDropContext, Draggable, Droppable } = window.ReactBeautifulDnd;

  function App() {
    // ...
  }

  // You can use JSX if your environment supports it
  ReactDOM.render(React.createElement(App), document.getElementById('app'));
</script>

There is also an example codepen you can use to play with this installation method.

ClojureScript

You can consume react-beautiful-dnd from within ClojureScript using CLJSJS!

← Back to documentation