Github

Installation Guide

ReDrop Library Installation Guide

The ReDrop library offers flexible installation options: via npm for use with build tools or via CDN for quick integration. Follow the steps below for your preferred installation method.

Please make sure you load the css file properly for library to work. Please see the Loading the CSS

1. Installing via npm

To install ReDrop using npm, run:

npm i redrop-dnd

The npm package includes both ESM (ECMAScript Modules) and UMD (Universal Module Definition) versions, as well as a CSS file that you’ll need to import separately.

Importing JavaScript

Depending on the "type" property in your project’s package.json:

  • If "type": "module" is set, use import:

import { Redrop } from 'redrop-dnd';

  • Otherwise, if "type": "commonjs" or not specified, use require:

const { Redrop } = require('redrop-dnd');

Importing CSS

To load the CSS styles, use one of the following options:

  1. Direct Import from Node Modules

Add this link tag to your HTML file:

<link rel="stylesheet" href="./node_modules/redrop-dnd/dist/redrop.css" />

Alternatively, use a CSS @import statement in your main stylesheet:

@import url("./node_modules/redrop-dnd/dist/redrop.css");

  1. CDN Import via jsDelivr

If you prefer, you can use jsDelivr to load the CSS directly from the CDN:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/redrop-dnd@latest/dist/redrop.css" />

or using CSS @import:

@import url("https://cdn.jsdelivr.net/npm/redrop-dnd@latest/dist/redrop.css");

Importing Types (for TypeScript users)

ReDrop provides TypeScript definitions to improve development efficiency. Import types as follows:

import { RedropTypes } from 'redrop-dnd';
// `RedropTypes` includes all the type definitions for ReDrop

If you are using TypeScript, type suggestions will automatically be loaded from the libraries' type definitions. You can also import a specific type using the import statement if a particular

Refer Type definitions for type related information

2. Installing via jsDelivr (CDN)

For projects not using npm, you can use jsDelivr to directly load both the CSS and JavaScript files.

Loading the CSS

To include the CSS, add a link to your HTML file:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/redrop-dnd@lastest/dist/redrop.css" />

or import it in your CSS:

@import url("https://cdn.jsdelivr.net/npm/redrop-dnd@latest/dist/redrop.css");

Loading the JavaScript

To load the ReDrop JavaScript, you have two options: ESM or UMD.

  1. Loading as a Module

Use this approach if your JavaScript files are of type module:

import * as redropDnd from "https://esm.run/redrop-dnd";

Alternatively:

import * as redropDnd from "https://cdn.jsdelivr.net/npm/redrop-dnd@latest/dist/index.es.min.js";

  1. Loading as a Script (UMD or ESM)

You can also load ReDrop directly in your HTML file using jsDelivr:

<!-- UMD Build -->
<script src="https://cdn.jsdelivr.net/npm/redrop-dnd@latest/dist/index.umd.js"></script>

<!-- ESM Build -->
<script type="module">
    import { Redrop } from "https://cdn.jsdelivr.net/npm/redrop-dnd@latest/+esm";
    const dndManager = new Redrop();
</script>

When loading the script as UMD, ensure it is already loaded before using it in any other file. Once the UMD script is loaded, you can access the Redrop module in any subsequent file. All methods are attached to the Redrop module, so you can access them like an object, e.g new Redrop.Redrop().

PreviousWelcomeNextQuickstart

Last updated