Skip to content

Latest commit

 

History

History
71 lines (47 loc) · 2.59 KB

installation.md

File metadata and controls

71 lines (47 loc) · 2.59 KB

Installation

module formats: umd, cjs, and esm

General

  1. Add the react-beautiful-dnd package
# yarn
yarn add react-beautiful-dnd

# npm
npm install react-beautiful-dnd --save
  1. Use the package
import { DragDropContext } from 'react-beautiful-dnd';
  1. Profit 🕺

React environment

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

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.

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

← Back to documentation