Socket
Socket
Sign inDemoInstall

react-draggable

Package Overview
Dependencies
Maintainers
2
Versions
79
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-draggable - npm Package Compare versions

Comparing version 4.3.1 to 4.4.0

31

build/cjs/Draggable.js

@@ -14,3 +14,3 @@ "use strict";

var _react = _interopRequireDefault(require("react"));
var React = _interopRequireWildcard(require("react"));

@@ -35,2 +35,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));

function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

@@ -66,2 +70,6 @@

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
function _createSuper(Derived) { return function () { var Super = _getPrototypeOf(Derived), result; if (_isNativeReflectConstruct()) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }

@@ -77,6 +85,2 @@

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

@@ -243,3 +247,3 @@

// Check to see if the element passed is an instanceof SVGElement
if (typeof window.SVGElement !== 'undefined' && _reactDom.default.findDOMNode(this) instanceof window.SVGElement) {
if (typeof window.SVGElement !== 'undefined' && this.findDOMNode() instanceof window.SVGElement) {
this.setState({

@@ -256,2 +260,11 @@ isElementSVG: true

}); // prevents invariant if unmounted while dragging
} // React Strict Mode compatibility: if `nodeRef` is passed, we will use it instead of trying to find
// the underlying DOM node ourselves. See the README for more information.
}, {
key: "findDOMNode",
value: function findDOMNode()
/*: ?HTMLElement*/
{
return this.props.nodeRef ? this.props.nodeRef.current : _reactDom.default.findDOMNode(this);
}

@@ -305,7 +318,7 @@ }, {

return /*#__PURE__*/_react.default.createElement(_DraggableCore.default, _extends({}, draggableCoreProps, {
return /*#__PURE__*/React.createElement(_DraggableCore.default, _extends({}, draggableCoreProps, {
onStart: this.onDragStart,
onDrag: this.onDrag,
onStop: this.onDragStop
}), _react.default.cloneElement(_react.default.Children.only(children), {
}), React.cloneElement(React.Children.only(children), {
className: className,

@@ -319,3 +332,3 @@ style: _objectSpread({}, children.props.style, {}, style),

return Draggable;
}(_react.default.Component);
}(React.Component);

@@ -322,0 +335,0 @@ exports.default = Draggable;

62

build/cjs/DraggableCore.js

@@ -8,3 +8,3 @@ "use strict";

var _react = _interopRequireDefault(require("react"));
var React = _interopRequireWildcard(require("react"));

@@ -25,2 +25,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));

function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

@@ -46,2 +50,6 @@

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
function _createSuper(Derived) { return function () { var Super = _getPrototypeOf(Derived), result; if (_isNativeReflectConstruct()) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }

@@ -57,6 +65,2 @@

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

@@ -86,9 +90,2 @@

/*:: export type DraggableBounds = {
left: number,
right: number,
top: number,
bottom: number,
};*/
/*:: export type DraggableData = {

@@ -116,2 +113,3 @@ node: HTMLElement,

handle: string,
nodeRef?: ?React.ElementRef<any>,
onStart: DraggableEventHandler,

@@ -163,3 +161,3 @@ onDrag: DraggableEventHandler,

var thisNode = _reactDom.default.findDOMNode(_assertThisInitialized(_this));
var thisNode = _this.findDOMNode();

@@ -288,3 +286,3 @@ if (!thisNode || !thisNode.ownerDocument || !thisNode.ownerDocument.body) {

var thisNode = _reactDom.default.findDOMNode(_assertThisInitialized(_this));
var thisNode = _this.findDOMNode();

@@ -344,3 +342,3 @@ if (thisNode) {

var thisNode = _reactDom.default.findDOMNode(this);
var thisNode = this.findDOMNode();

@@ -359,3 +357,3 @@ if (thisNode) {

var thisNode = _reactDom.default.findDOMNode(this);
var thisNode = this.findDOMNode();

@@ -373,2 +371,11 @@ if (thisNode) {

}
} // React Strict Mode compatibility: if `nodeRef` is passed, we will use it instead of trying to find
// the underlying DOM node ourselves. See the README for more information.
}, {
key: "findDOMNode",
value: function findDOMNode()
/*: ?HTMLElement*/
{
return this.props.nodeRef ? this.props.nodeRef.current : _reactDom.default.findDOMNode(this);
}

@@ -380,3 +387,3 @@ }, {

// This makes it flexible to use whatever element is wanted (div, ul, etc)
return _react.default.cloneElement(_react.default.Children.only(this.props.children), {
return React.cloneElement(React.Children.only(this.props.children), {
// Note: mouseMove handler is attached to document so it will still function

@@ -395,3 +402,3 @@ // when the user drags quickly and leaves the bounds of the element.

return DraggableCore;
}(_react.default.Component);
}(React.Component);

@@ -487,2 +494,21 @@ exports.default = DraggableCore;

/* If running in React Strict mode, ReactDOM.findDOMNode() is deprecated.
* Unfortunately, in order for <Draggable> to work properly, we need raw access
* to the underlying DOM node. If you want to avoid the warning, pass a `nodeRef`
* as in this example:
*
* function MyComponent() {
* const nodeRef = React.useRef(null);
* return (
* <Draggable nodeRef={nodeRef}>
* <div ref={nodeRef}>Example Target</div>
* </Draggable>
* );
* }
*
* This can be used for arbitrarily nested components, so long as the ref ends up
* pointing to the actual child DOM node and not a custom component.
*/
nodeRef: _propTypes.default.object,
/**

@@ -489,0 +515,0 @@ * Called when dragging starts.

6

build/cjs/utils/positionFns.js

@@ -16,8 +16,4 @@ "use strict";

var _reactDom = _interopRequireDefault(require("react-dom"));
var _domFns = require("./domFns");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function getBoundPosition(draggable

@@ -201,3 +197,3 @@ /*: Draggable*/

{
var node = _reactDom.default.findDOMNode(draggable);
var node = draggable.findDOMNode();

@@ -204,0 +200,0 @@ if (!node) {

4

build/cjs/utils/shims.js

@@ -28,3 +28,3 @@ "use strict";

)
/*: boolean*/
/*: boolean %checks*/
{

@@ -37,3 +37,3 @@ return typeof func === 'function' || Object.prototype.toString.call(func) === '[object Function]';

)
/*: boolean*/
/*: boolean %checks*/
{

@@ -40,0 +40,0 @@ return typeof num === 'number' && !isNaN(num);

6

build/cjs/utils/types.js

@@ -14,2 +14,4 @@ "use strict";

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
function _createSuper(Derived) { return function () { var Super = _getPrototypeOf(Derived), result; if (_isNativeReflectConstruct()) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }

@@ -21,4 +23,2 @@

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
function _wrapNativeSuper(Class) { var _cache = typeof Map === "function" ? new Map() : undefined; _wrapNativeSuper = function _wrapNativeSuper(Class) { if (Class === null || !_isNativeFunction(Class)) return Class; if (typeof Class !== "function") { throw new TypeError("Super expression must either be null or a function"); } if (typeof _cache !== "undefined") { if (_cache.has(Class)) return _cache.get(Class); _cache.set(Class, Wrapper); } function Wrapper() { return _construct(Class, arguments, _getPrototypeOf(this).constructor); } Wrapper.prototype = Object.create(Class.prototype, { constructor: { value: Wrapper, enumerable: false, writable: true, configurable: true } }); return _setPrototypeOf(Wrapper, Class); }; return _wrapNativeSuper(Class); }

@@ -48,3 +48,3 @@

/*:: export type Bounds = {
left: number, top: number, right: number, bottom: number
left?: number, top?: number, right?: number, bottom?: number
};*/

@@ -51,0 +51,0 @@

19

build/module/Draggable.js

@@ -5,3 +5,3 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

import React from 'react';
import * as React from 'react';
import PropTypes from 'prop-types';

@@ -14,6 +14,6 @@ import ReactDOM from 'react-dom';

import DraggableCore from './DraggableCore';
/*:: import type {ControlPosition, PositionOffsetControlPosition, DraggableBounds, DraggableCoreProps} from './DraggableCore';*/
/*:: import type {ControlPosition, PositionOffsetControlPosition, DraggableCoreProps} from './DraggableCore';*/
import log from './utils/log';
/*:: import type {DraggableEventHandler} from './utils/types';*/
/*:: import type {Bounds, DraggableEventHandler} from './utils/types';*/

@@ -34,3 +34,3 @@ /*:: import type {Element as ReactElement} from 'react';*/

axis: 'both' | 'x' | 'y' | 'none',
bounds: DraggableBounds | string | false,
bounds: Bounds | string | false,
defaultClassName: string,

@@ -40,2 +40,3 @@ defaultClassNameDragging: string,

defaultPosition: ControlPosition,
nodeRef?: ?React.ElementRef<any>,
positionOffset: PositionOffsetControlPosition,

@@ -193,3 +194,3 @@ position: ControlPosition,

// Check to see if the element passed is an instanceof SVGElement
if (typeof window.SVGElement !== 'undefined' && ReactDOM.findDOMNode(this) instanceof window.SVGElement) {
if (typeof window.SVGElement !== 'undefined' && this.findDOMNode() instanceof window.SVGElement) {
this.setState({

@@ -205,2 +206,10 @@ isElementSVG: true

}); // prevents invariant if unmounted while dragging
} // React Strict Mode compatibility: if `nodeRef` is passed, we will use it instead of trying to find
// the underlying DOM node ourselves. See the README for more information.
findDOMNode()
/*: ?HTMLElement*/
{
return this.props.nodeRef ? this.props.nodeRef.current : ReactDOM.findDOMNode(this);
}

@@ -207,0 +216,0 @@

45

build/module/DraggableCore.js
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
import React from 'react';
import * as React from 'react';
import PropTypes from 'prop-types';

@@ -36,9 +36,2 @@ import ReactDOM from 'react-dom';

/*:: export type DraggableBounds = {
left: number,
right: number,
top: number,
bottom: number,
};*/
/*:: export type DraggableData = {

@@ -66,2 +59,3 @@ node: HTMLElement,

handle: string,
nodeRef?: ?React.ElementRef<any>,
onStart: DraggableEventHandler,

@@ -102,3 +96,3 @@ onDrag: DraggableEventHandler,

const thisNode = ReactDOM.findDOMNode(this);
const thisNode = this.findDOMNode();

@@ -221,3 +215,3 @@ if (!thisNode || !thisNode.ownerDocument || !thisNode.ownerDocument.body) {

if (shouldContinue === false || this.mounted === false) return false;
const thisNode = ReactDOM.findDOMNode(this);
const thisNode = this.findDOMNode();

@@ -273,3 +267,3 @@ if (thisNode) {

const thisNode = ReactDOM.findDOMNode(this);
const thisNode = this.findDOMNode();

@@ -287,3 +281,3 @@ if (thisNode) {

const thisNode = ReactDOM.findDOMNode(this);
const thisNode = this.findDOMNode();

@@ -303,2 +297,10 @@ if (thisNode) {

}
} // React Strict Mode compatibility: if `nodeRef` is passed, we will use it instead of trying to find
// the underlying DOM node ourselves. See the README for more information.
findDOMNode()
/*: ?HTMLElement*/
{
return this.props.nodeRef ? this.props.nodeRef.current : ReactDOM.findDOMNode(this);
}

@@ -410,2 +412,21 @@

/* If running in React Strict mode, ReactDOM.findDOMNode() is deprecated.
* Unfortunately, in order for <Draggable> to work properly, we need raw access
* to the underlying DOM node. If you want to avoid the warning, pass a `nodeRef`
* as in this example:
*
* function MyComponent() {
* const nodeRef = React.useRef(null);
* return (
* <Draggable nodeRef={nodeRef}>
* <div ref={nodeRef}>Example Target</div>
* </Draggable>
* );
* }
*
* This can be used for arbitrarily nested components, so long as the ref ends up
* pointing to the actual child DOM node and not a custom component.
*/
nodeRef: PropTypes.object,
/**

@@ -412,0 +433,0 @@ * Called when dragging starts.

3

build/module/utils/positionFns.js
import { isNum, int } from './shims';
import ReactDOM from 'react-dom';
import { getTouch, innerWidth, innerHeight, offsetXYFromParent, outerWidth, outerHeight } from './domFns';

@@ -185,3 +184,3 @@ /*:: import type Draggable from '../Draggable';*/

{
const node = ReactDOM.findDOMNode(draggable);
const node = draggable.findDOMNode();

@@ -188,0 +187,0 @@ if (!node) {

4

build/module/utils/shims.js

@@ -16,3 +16,3 @@ // @credits https://gist.github.com/rogozhnikoff/a43cfed27c41e4e68cdc

)
/*: boolean*/
/*: boolean %checks*/
{

@@ -24,3 +24,3 @@ return typeof func === 'function' || Object.prototype.toString.call(func) === '[object Function]';

)
/*: boolean*/
/*: boolean %checks*/
{

@@ -27,0 +27,0 @@ return typeof num === 'number' && !isNaN(num);

2

build/module/utils/types.js

@@ -15,3 +15,3 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

/*:: export type Bounds = {
left: number, top: number, right: number, bottom: number
left?: number, top?: number, right?: number, bottom?: number
};*/

@@ -18,0 +18,0 @@

43

CHANGELOG.md
# Changelog
### 4.4.0 (May 12, 2020)
- Add `nodeRef`:
- If running in React Strict mode, ReactDOM.findDOMNode() is deprecated.
Unfortunately, in order for <Draggable> to work properly, we need raw access
to the underlying DOM node. If you want to avoid the warning, pass a `nodeRef`
as in this example:
```js
function MyComponent() {
const nodeRef = React.useRef(null);
return (
<Draggable nodeRef={nodeRef}>
<div ref={nodeRef}>Example Target</div>
</Draggable>
);
}
````
This can be used for arbitrarily nested components, so long as the ref ends up
pointing to the actual child DOM node and not a custom component.
Thanks to react-transition-group for the inspiration.
`nodeRef` is also available on <DraggableCore>.
- Remove "browser" field in "package.json":
- There is nothing special in the browser build that is actually practical
for modern use. The "browser" field, as defined in
https://github.com/defunctzombie/package-browser-field-spec#overview,
indicates that you should use it if you are directly accessing globals,
using browser-specific features, dom manipulation, etc.
React components like react-draggable are built to do minimal raw
DOM manipulation, and to always gate this behind conditionals to ensure
that server-side rendering still works. We don't make any changes
to any of that for the "browser" build, so it's entirely redundant.
This should also fix the "Super expression must either be null or
a function" error (#472) that some users have experienced with particular
bundler configurations.
The browser build may still be imported at "build/web/react-draggable.min.js".
This is to prevent breakage only. The file is no longer minified to prevent
possible [terser bugs](https://github.com/terser/terser/issues/308).
- The browser build will likely be removed entirely in 5.0.
- Fix: Make `bounds` optional in TypeScript [#473](https://github.com/strml/react-draggable/pull/473)
### 4.3.1 (Apr 11, 2020)

@@ -4,0 +47,0 @@

19

package.json
{
"name": "react-draggable",
"version": "4.3.1",
"version": "4.4.0",
"description": "React draggable component",
"main": "build/cjs/cjs.js",
"browser": "build/web/react-draggable.min.js",
"module": "build/module/Draggable.js",

@@ -47,6 +46,6 @@ "scripts": {

"@babel/plugin-transform-flow-comments": "^7.8.3",
"@babel/preset-env": "^7.9.0",
"@babel/preset-env": "^7.9.5",
"@babel/preset-flow": "^7.9.0",
"@babel/preset-react": "^7.9.4",
"@types/react": "^16.9.32",
"@types/react": "^16.9.34",
"@types/react-dom": "^16.9.6",

@@ -59,5 +58,5 @@ "babel-eslint": "^10.1.0",

"eslint-plugin-react": "^7.19.0",
"flow-bin": "^0.122.0",
"flow-bin": "^0.123.0",
"jasmine-core": "^3.5.0",
"karma": "^4.4.1",
"karma": "^5.0.2",
"karma-chrome-launcher": "^3.1.0",

@@ -75,12 +74,10 @@ "karma-cli": "2.0.0",

"pre-commit": "^1.2.2",
"puppeteer": "^2.1.1",
"puppeteer": "^3.0.0",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-frame-component": "^2.0.0",
"react-frame-component": "^4.1.1",
"react-test-renderer": "^16.13.1",
"semver": "^6.3.0",
"semver": "^7.3.2",
"static-server": "^3.0.0",
"terser-webpack-plugin": "^2.3.5",
"typescript": "^3.8.3",
"uglify-js": "^3.8.1",
"webpack": "^4.42.1",

@@ -87,0 +84,0 @@ "webpack-cli": "^3.3.11",

28

README.md
# React-Draggable
[![TravisCI Build Status](https://travis-ci.org/strml/react-draggable.svg?branch=master)](https://travis-ci.org/strml/react-draggable)
[![TravisCI Build Status](https://api.travis-ci.org/STRML/react-draggable.svg?branch=master)](https://travis-ci.org/strml/react-draggable)
[![Appveyor Build Status](https://ci.appveyor.com/api/projects/status/32r7s2skrgm9ubva?svg=true)](https://ci.appveyor.com/project/strml/react-draggable)
[![npm downloads](https://img.shields.io/npm/dt/react-draggable.svg?maxAge=2592000)](http://npmjs.com/package/react-draggable)
[![gzip size](http://img.badgesize.io/https://npmcdn.com/react-draggable/dist/react-draggable.min.js?compression=gzip)]()
[![gzip size](http://img.badgesize.io/https://npmcdn.com/react-draggable/build/web/react-draggable.min.js?compression=gzip)]()
[![version](https://img.shields.io/npm/v/react-draggable.svg)]()

@@ -179,3 +179,3 @@

// can be moved.
bounds: {left: number, top: number, right: number, bottom: number} | string,
bounds: {left?: number, top?: number, right?: number, bottom?: number} | string,

@@ -228,2 +228,24 @@ // Specifies a selector to be used to prevent drag initialization. The string is passed to

// If running in React Strict mode, ReactDOM.findDOMNode() is deprecated.
// Unfortunately, in order for <Draggable> to work properly, we need raw access
// to the underlying DOM node. If you want to avoid the warning, pass a `nodeRef`
// as in this example:
//
// function MyComponent() {
// const nodeRef = React.useRef(null);
// return (
// <Draggable nodeRef={nodeRef}>
// <div ref={nodeRef}>Example Target</div>
// </Draggable>
// );
// }
//
// This can be used for arbitrarily nested components, so long as the ref ends up
// pointing to the actual child DOM node and not a custom component.
//
// Thanks to react-transition-group for the inspiration.
//
// `nodeRef` is also available on <DraggableCore>.
nodeRef: React.Ref<typeof React.Component>,
// Much like React form elements, if this property is present, the item

@@ -230,0 +252,0 @@ // becomes 'controlled' and is not responsive to user input. Use `position`

8

typings/index.d.ts

@@ -5,6 +5,6 @@ declare module 'react-draggable' {

export interface DraggableBounds {
left: number
right: number
top: number
bottom: number
left?: number
right?: number
top?: number
bottom?: number
}

@@ -11,0 +11,0 @@ 

build/web/react-draggable.min.js.LICENSE.txt
build/web/react-draggable.min.js

Sorry, the diff of this file is too big to display

build/web/react-draggable.min.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc