1. Add the @hello-pangea/dnd package

# npm
npm install @hello-pangea/dnd --save

# pnpm
pnpm add @hello-pangea/dnd

# yarn
yarn add @hello-pangea/dnd

2. Use the package

import { DragDropContext } from '@hello-pangea/dnd';

3. Profit 🕺

In order to use @hello-pangea/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 (This is using react-beautiful-dnd)

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

• dist/dnd.js
• dist/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 @hello-pangea/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/@hello-pangea/[email protected]/dist/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.

You can consume @hello-pangea/dnd from within ClojureScript using CLJSJS!

← Back to documentation