React draggable component

Overview

React-Draggable

TravisCI Build Status Appveyor Build Status npm downloads gzip size version

A simple component for making elements draggable.

<Draggable>
  <div>I can now be moved around!</div>
</Draggable>
Version Compatibility
4.x React 16.3+
3.x React 15-16
2.x React 0.14 - 15
1.x React 0.13 - 0.14
0.x React 0.10 - 0.13

Technical Documentation

Installing

$ npm install react-draggable

If you aren't using browserify/webpack, a UMD version of react-draggable is available. It is updated per-release only. This bundle is also what is loaded when installing from npm. It expects external React and ReactDOM.

If you want a UMD version of the latest master revision, you can generate it yourself from master by cloning this repository and running $ make. This will create umd dist files in the dist/ folder.

Exports

The default export is <Draggable>. At the .DraggableCore property is <DraggableCore>. Here's how to use it:

// ES6
import Draggable from 'react-draggable'; // The default
import {DraggableCore} from 'react-draggable'; // <DraggableCore>
import Draggable, {DraggableCore} from 'react-draggable'; // Both at the same time

// CommonJS
let Draggable = require('react-draggable');
let DraggableCore = Draggable.DraggableCore;

<Draggable>

A <Draggable> element wraps an existing element and extends it with new event handlers and styles. It does not create a wrapper element in the DOM.

Draggable items are moved using CSS Transforms. This allows items to be dragged regardless of their current positioning (relative, absolute, or static). Elements can also be moved between drags without incident.

If the item you are dragging already has a CSS Transform applied, it will be overwritten by <Draggable>. Use an intermediate wrapper (<Draggable><span>...</span></Draggable>) in this case.

Draggable Usage

View the Demo and its source for more.

import React from 'react';
import ReactDOM from 'react-dom';
import Draggable from 'react-draggable';

class App extends React.Component {

  eventLogger = (e: MouseEvent, data: Object) => {
    console.log('Event: ', e);
    console.log('Data: ', data);
  };

  render() {
    return (
      <Draggable
        axis="x"
        handle=".handle"
        defaultPosition={{x: 0, y: 0}}
        position={null}
        grid={[25, 25]}
        scale={1}
        onStart={this.handleStart}
        onDrag={this.handleDrag}
        onStop={this.handleStop}>
        <div>
          <div className="handle">Drag from here</div>
          <div>This readme is really dragging on...</div>
        </div>
      </Draggable>
    );
  }
}

ReactDOM.render(<App/>, document.body);

Draggable API

The <Draggable/> component transparently adds draggability to its children.

Note: Only a single child is allowed or an Error will be thrown.

For the <Draggable/> component to correctly attach itself to its child, the child element must provide support for the following props:

  • style is used to give the transform css to the child.
  • className is used to apply the proper classes to the object being dragged.
  • onMouseDown, onMouseUp, onTouchStart, and onTouchEnd are used to keep track of dragging state.

React.DOM elements support the above properties by default, so you may use those elements as children without any changes. If you wish to use a React component you created, you'll need to be sure to transfer prop.

<Draggable> Props:

//
// Types:
//
type DraggableEventHandler = (e: Event, data: DraggableData) => void | false;
type DraggableData = {
  node: HTMLElement,
  // lastX + deltaX === x
  x: number, y: number,
  deltaX: number, deltaY: number,
  lastX: number, lastY: number
};

//
// Props:
//
{
// If set to `true`, will allow dragging on non left-button clicks.
allowAnyClick: boolean,

// Determines which axis the draggable can move. This only affects
// flushing to the DOM. Callbacks will still include all values.
// Accepted values:
// - `both` allows movement horizontally and vertically (default).
// - `x` limits movement to horizontal axis.
// - `y` limits movement to vertical axis.
// - 'none' stops all movement.
axis: string,

// Specifies movement boundaries. Accepted values:
// - `parent` restricts movement within the node's offsetParent
//    (nearest node with position relative or absolute), or
// - a selector, restricts movement within the targeted node
// - An object with `left, top, right, and bottom` properties.
//   These indicate how far in each direction the draggable
//   can be moved.
bounds: {left?: number, top?: number, right?: number, bottom?: number} | string,

// Specifies a selector to be used to prevent drag initialization. The string is passed to
// Element.matches, so it's possible to use multiple selectors like `.first, .second`.
// Example: '.body'
cancel: string,

// Class names for draggable UI.
// Default to 'react-draggable', 'react-draggable-dragging', and 'react-draggable-dragged'
defaultClassName: string,
defaultClassNameDragging: string,
defaultClassNameDragged: string,

// Specifies the `x` and `y` that the dragged item should start at.
// This is generally not necessary to use (you can use absolute or relative
// positioning of the child directly), but can be helpful for uniformity in
// your callbacks and with css transforms.
defaultPosition: {x: number, y: number},

// If true, will not call any drag handlers.
disabled: boolean,

// Specifies the x and y that dragging should snap to.
grid: [number, number],

// Specifies a selector to be used as the handle that initiates drag.
// Example: '.handle'
handle: string,

// If desired, you can provide your own offsetParent for drag calculations.
// By default, we use the Draggable's offsetParent. This can be useful for elements
// with odd display types or floats.
offsetParent: HTMLElement,

// Called whenever the user mouses down. Called regardless of handle or
// disabled status.
onMouseDown: (e: MouseEvent) => void,

// Called when dragging starts. If `false` is returned any handler,
// the action will cancel.
onStart: DraggableEventHandler,

// Called while dragging.
onDrag: DraggableEventHandler,

// Called when dragging stops.
onStop: DraggableEventHandler,

// 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
// becomes 'controlled' and is not responsive to user input. Use `position`
// if you need to have direct control of the element.
position: {x: number, y: number}

// A position offset to start with. Useful for giving an initial position
// to the element. Differs from `defaultPosition` in that it does not
// affect the position returned in draggable callbacks, and in that it
// accepts strings, like `{x: '10%', y: '10%'}`.
positionOffset: {x: number | string, y: number | string},

// Specifies the scale of the canvas your are dragging this element on. This allows
// you to, for example, get the correct drag deltas while you are zoomed in or out via
// a transform or matrix in the parent of this element.
scale: number
}

Note that sending className, style, or transform as properties will error - set them on the child element directly.

Controlled vs. Uncontrolled

<Draggable> is a 'batteries-included' component that manages its own state. If you want to completely control the lifecycle of the component, use <DraggableCore>.

For some users, they may want the nice state management that <Draggable> provides, but occasionally want to programmatically reposition their components. <Draggable> allows this customization via a system that is similar to how React handles form components.

If the prop position: {x: number, y: number} is defined, the <Draggable> will ignore its internal state and use the provided position instead. Alternatively, you can seed the position using defaultPosition. Technically, since <Draggable> works only on position deltas, you could also seed the initial position using CSS top/left.

We make one modification to the React philosophy here - we still allow dragging while a component is controlled. We then expect you to use at least an onDrag or onStop handler to synchronize state.

To disable dragging while controlled, send the prop disabled={true} - at this point the <Draggable> will operate like a completely static component.

<DraggableCore>

For users that require absolute control, a <DraggableCore> element is available. This is useful as an abstraction over touch and mouse events, but with full control. <DraggableCore> has no internal state.

See React-Resizable and React-Grid-Layout for some usage examples.

<DraggableCore> is a useful building block for other libraries that simply want to abstract browser-specific quirks and receive callbacks when a user attempts to move an element. It does not set styles or transforms on itself and thus must have callbacks attached to be useful.

DraggableCore API

<DraggableCore> takes a limited subset of options:

{
  allowAnyClick: boolean,
  cancel: string,
  disabled: boolean,
  enableUserSelectHack: boolean,
  offsetParent: HTMLElement,
  grid: [number, number],
  handle: string,
  onStart: DraggableEventHandler,
  onDrag: DraggableEventHandler,
  onStop: DraggableEventHandler,
  onMouseDown: (e: MouseEvent) => void,
  scale: number
}

Note that there is no start position. <DraggableCore> simply calls drag handlers with the below parameters, indicating its position (as inferred from the underlying MouseEvent) and deltas. It is up to the parent to set actual positions on <DraggableCore>.

Drag callbacks (onStart, onDrag, onStop) are called with the same arguments as <Draggable>.


Contributing

  • Fork the project
  • Run the project in development mode: $ npm run dev
  • Make changes.
  • Add appropriate tests
  • $ npm test
  • If tests don't pass, make them pass.
  • Update README with appropriate docs.
  • Commit and PR

Release checklist

  • Update CHANGELOG
  • make release-patch, make release-minor, or make-release-major
  • make publish

License

MIT

Comments
  • Add `offsetParent` prop for alternative offset calculations

    Add `offsetParent` prop for alternative offset calculations

    Allows nodes to use the body as origin instead of the parent. This is useful, when the parent's position is changing. When used, resolves #170

    This issue was introduced by a398097ebcc2cbb4df5582a8a3f42f51d21745a0

    please :eyes:

    opened by aeneasr 18
  • Issues with TypeScript

    Issues with TypeScript

    Hi, I'm working with TypeScript and installed react-draggable. As it is said in the doc touse the <Draggable /> component I need to import as default:

    The default export is <Draggable>. At the .DraggableCore property is <DraggableCore>. Here's how to use it:

    // ES6
    import Draggable from 'react-draggable'; // The default
    

    But when I try to import it:

    // myComponent.tsx
    import Draggable from 'react-draggable';
    

    I get the Module "react-draggable" has no default export. error. Doing:

    import * as Draggable from 'react-draggable';
    

    brings me the <Draggable /> component but in TypeScript syntaxis * as also brings all definitions and typings so I can't use it as a component (error: JSX element type 'Draggable' does not have any construct or call signatures.)

    I only can use it is:

    const Draggable: any = require('react-draggable');
    

    but it's weird since this package already gives typings.

    I'm using typescript 2.3.2 and awesome-typescript-loader 3.1.3. Anyone has encountered this issue? PD: Big thanks to give typings. This is an awesome package!

    opened by crsanti 16
  • Detecting click vs drag

    Detecting click vs drag

    I have a use-case in which the draggable element can either be dragged around or clicked to begin editing. Is there a way to detect a single click versus a drag motion?

    opened by robzolkos 15
  • Added support for custom dragging and dragged class names

    Added support for custom dragging and dragged class names

    Nifty library! Thanks for creating it. :)

    I noticed that className can be used to specify a custom class (eg for CSS modules) but there is no way to specify a custom is-dragging or is-dragged class. This PR adds that functionality (and tests).

    Note that npm test is broken in master (and won't pass until PR #176 is merged).

    Note that npm run lint also fails in master:

    # FIXME this is usually global
    flow check
    .flowconfig:16 Unsupported option: "esproposal.class_instance_fields"
    make: *** [lint] Error 4
    
    opened by bvaughn 14
  • Dragging SVG elements in IE (any version)

    Dragging SVG elements in IE (any version)

    At the moment I don't have a jsfiddle setup, but it appears that the dragging of SVG elements has no effect in any version of Internet Explorer. I can't think of any obvious reason why this would be because translate works just fine in IE on SVG. It seems to have something to do with the onDrag event listeners.

    opened by psaia 13
  • ie11 support

    ie11 support

    Hi, is IE11 supported with react-draggable? I couldn't get the demo page to work when using IE11 on a windows 7 vm so I'm not sure if the demo page is just pointing to old code or if this is a general issue with react-draggable.

    When dragging I saw "SCRIPT5007: Unable to get property '0' of undefined or null reference File: react-draggable.min.js, Line: 1, Column: 1805"

    opened by dalehille 13
  • Make window & document references iframe-aware

    Make window & document references iframe-aware

    This PR uses the DOM element’s ownerDocument rather than the global document or window to make react-draggable work across iframes. In our use case, we have an app being rendered into an iframe with React Frame Component, so the DOM elements are in a separate document from the document where the React elements are being executed.

    I chose to replace the instanceOf Node check with a simple duck-typing check (https://github.com/mzabriskie/react-draggable/compare/master...Brandcast:iframe?expand=1#diff-9f4a38358e68eff5cf48eda850801a7aL190), which could be adapted to whatever type of conditional. It would even do the same check, but to work across iframes, it would need to first find the window object relative to e.target. Let me know if you want me to change or update that.

    opened by acusti 12
  • Please, use translate3d instead of translate

    Please, use translate3d instead of translate

    I'm using this on a mobile app, translate is very slow as it don't make use of the GPU, you can just make a 3d option available, I'm forking it just for this. This is a great plugin, it will fit my needs with this option.

    opened by ezsper 12
  • moveOnStartChange causes unnecessary state updates

    moveOnStartChange causes unnecessary state updates

    I'm using react-draggable in my application to scroll an item in a viewport (i.e. dragging the background scrolls the view), and also for custom scrollbars around the viewport. Needless to say, I needed to use the moveOnStartChange attribute to keep these two manners of scrolling the same viewport consistent. I found, however, that there was some really buggy behavior in react-draggable, and it stemmed from the fact that componentWillReceiveProps triggers too often.

    If you declare your component like this:

    <Draggable start={{x: 0, y: 0}}>...</Draggable>
    

    then every time the render() method is called, the componentWillReceiveProps method is called because, technically, a new object is being passed as the 'start' property.

    The solution I have come up with is to change lines 471-473 in the componentWillReceiveProps method to:

    if (newProps.moveOnStartChange && newProps.start &&
        (newProps.start.x !== this.props.start.x || newProps.start.y !== this.props.start.y))
    {
        this.setState(this.getInitialState(newProps));
    }
    

    Thoughts?

    opened by jmuerle 12
  • adding positionOffset prop to <Draggable/>

    adding positionOffset prop to

    Hey @STRML, here is my first pass at allowing initial position to be a string percent. It is essentially using the same code as before but does not modify the defaultPosition prop in any way and instead adds a new initialPosition prop.

    I think this is working as is. We should probably add a few more tests to be sure that the drag callbacks that broke last time aren't breaking this time.

    connects https://github.com/mzabriskie/react-draggable/issues/391

    opened by tnrich 11
  • Unmount after drag causes

    Unmount after drag causes "setState on unmounted component" error

    Draggable component seems to trigger an error after it is unmounted as the result of an onStop handler.

    Specifically:

    Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
      in Draggable (created by App)
    

    It seems similar to #130.

    I've made a simple repro of the issue with the latest version that you can find here.

    It only seems to happen once, and any following unmounts, even on other instances of the component, do not trigger the error.

    opened by Tenga 11
  • How to convert React-Draggable coordinates into Element.getBoundingClientRect()?

    How to convert React-Draggable coordinates into Element.getBoundingClientRect()?

    I noticed that the x and y coordinates that React-Draggable gives out is completely different from what getBoundingClientRect gives out. Here's a snippet of my code:

    const [position, setPosition] = useState({ x: 0, y: 0 });
    const trackPos = (data) => {
         setPosition({ x: data.x, y: data.y });
    };
    
    <Draggable onDrag={(e, data) => trackPos(data)}>
         <div ref = {ref}>...</div>
    </Draggable>
    

    When I print out the values of both ref.getBoundingClientRect() from the component and that of data are completely different. Is there any way to convert these values?

    opened by tetrahed 0
  • Resolving deprecation of `findDOMNode` in StrictMode

    Resolving deprecation of `findDOMNode` in StrictMode

    Problem

    Getting this warning when using the deprecated function findDOMNode in StrictMode. findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of DraggableCore which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here

    Suggested Solution

    To resolve this warning, I suggest replacing findDOMNode with an innerRef. If the user passes a ref as a prop, we'll use it as the draggable ref. Otherwise, we'll create an internal ref and use it as the draggable ref. We can then easily access the draggable DOM element : ref.current

    Here is the implementation :

    class DraggableCore extends React.Component<DraggableCoreProps, DraggableCoreState> {
    	lastHtml: string = this.props.html;
    	element: any =
    		typeof this.props.innerRef === 'function'
    			? { current: null }
    			: React.createRef<HTMLElement>();
    
    	// Now w'll use `getElement` instead of `findDOMNode`
    	getElement = () =>
    		(this.props.innerRef && typeof this.props.innerRef !== 'function'
    			? this.props.innerRef
    			: this.element
    		).current;
    
    	// Now if we need draggable DOM element :
    	// const element = this.getElement();
    
    	render() {
    		const { innerRef, children, ...props } = this.props;
    
    		return React.cloneElement(React.Children.only(children), {
    			ref: typeof innerRef === 'function'
    				? (current: HTMLElement) => {
    					innerRef(current);
    					this.element.current = current;
    				}
    				: innerRef || this.element,
    			...props,
    		});
    	}
    }
    

    And here is a simple usage :

    const myExternalRef = useRef(null)
    
    // `innerRef` is optional, if it's not passed we'll create an internal ref
    <DraggableCore innerRef={myExternalRef}>
    	<span>Test</span>
    </DraggableCore>
    
    opened by mustaphaboudouch 0
  • remove unnecessary global typescript namespace declaration

    remove unnecessary global typescript namespace declaration

    Declaring a global module with declare module 'react-draggable' is unnecessary, and can cause type pollution if multiple versions of react-draggable end up in a package.

    This is exemplified in this repro: https://github.com/pgoldberg/react-draggable-typings-bug

    The global module declaration is not necessary. Typescript will appropriately associate the typings with the react-draggable module, since the typings are declared in the package.json here: https://github.com/react-grid-layout/react-draggable/blob/44a8c6ed103ec6c0a4dda5faf7f8ebca16f9b325/package.json#L24

    opened by pgoldberg 0
  • Ability to drag outside browser window...?

    Ability to drag outside browser window...?

    Is there any way currently, to drag outside the browser window...?

    This feature is particularly needed for desktop / Tauri apps where users are used to being able to drag things freely outside window bounds.

    opened by happymingjieli 1
  • build(deps): bump engine.io from 6.2.0 to 6.2.1

    build(deps): bump engine.io from 6.2.0 to 6.2.1

    Bumps engine.io from 6.2.0 to 6.2.1.

    Release notes

    Sourced from engine.io's releases.

    6.2.1

    :warning: This release contains an important security fix :warning:

    A malicious client could send a specially crafted HTTP request, triggering an uncaught exception and killing the Node.js process:

    Error: read ECONNRESET
        at TCP.onStreamRead (internal/stream_base_commons.js:209:20)
    Emitted 'error' event on Socket instance at:
        at emitErrorNT (internal/streams/destroy.js:106:8)
        at emitErrorCloseNT (internal/streams/destroy.js:74:3)
        at processTicksAndRejections (internal/process/task_queues.js:80:21) {
      errno: -104,
      code: 'ECONNRESET',
      syscall: 'read'
    }
    

    Please upgrade as soon as possible.

    Bug Fixes

    • catch errors when destroying invalid upgrades (#658) (425e833)
    Changelog

    Sourced from engine.io's changelog.

    6.2.1 (2022-11-20)

    :warning: This release contains an important security fix :warning:

    A malicious client could send a specially crafted HTTP request, triggering an uncaught exception and killing the Node.js process:

    Error: read ECONNRESET
        at TCP.onStreamRead (internal/stream_base_commons.js:209:20)
    Emitted 'error' event on Socket instance at:
        at emitErrorNT (internal/streams/destroy.js:106:8)
        at emitErrorCloseNT (internal/streams/destroy.js:74:3)
        at processTicksAndRejections (internal/process/task_queues.js:80:21) {
      errno: -104,
      code: 'ECONNRESET',
      syscall: 'read'
    }
    

    Please upgrade as soon as possible.

    Bug Fixes

    • catch errors when destroying invalid upgrades (#658) (425e833)

    3.6.0 (2022-06-06)

    Bug Fixes

    Features

    • decrease the default value of maxHttpBufferSize (58e274c)

    This change reduces the default value from 100 mb to a more sane 1 mb.

    This helps protect the server against denial of service attacks by malicious clients sending huge amounts of data.

    See also: https://github.com/advisories/GHSA-j4f2-536g-r55m

    • increase the default value of pingTimeout (f55a79a)
    Commits
    • 24b847b chore(release): 6.2.1
    • 425e833 fix: catch errors when destroying invalid upgrades (#658)
    • 99adb00 chore(deps): bump xmlhttprequest-ssl and engine.io-client in /examples/latenc...
    • d196f6a chore(deps): bump minimatch from 3.0.4 to 3.1.2 (#660)
    • 7c1270f chore(deps): bump nanoid from 3.1.25 to 3.3.1 (#659)
    • 535a01d ci: add Node.js 18 in the test matrix
    • 1b71a6f docs: remove "Vanilla JS" highlight from README (#656)
    • 917d1d2 refactor: replace deprecated String.prototype.substr() (#646)
    • 020801a chore: add changelog for version 3.6.0
    • ed1d6f9 test: make test script work on Windows (#643)
    • See full diff in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
Releases(v2.2.3)
  • v2.2.3(Dec 8, 2016)

  • v2.2.2(Dec 8, 2016)

  • v2.2.1(Dec 8, 2016)

  • v2.2.0(Dec 8, 2016)

    • Addition: offsetParent property for an arbitrary ancestor for offset calculations.
      • Fixes e.g. dragging with a floating offsetParent.
        • Ref: https://github.com/mzabriskie/react-draggable/issues/170
    • Enhancement: Make this library iframe-aware.
      • Ref: https://github.com/mzabriskie/react-draggable/pull/177
      • Thanks to @acusti for tests
    • Bugfix: Lint/Test Fixes for new Flow & React versions
    Source code(tar.gz)
    Source code(zip)
  • v2.1.2(Dec 8, 2016)

  • v2.1.1(Dec 8, 2016)

  • v2.1.0(Dec 8, 2016)

    • Fix improperly missed handle or cancel selectors if the event originates from a child of the handle or cancel.
      • Fixes a longstanding issue, #88
      • This was pushed to a minor release as there may be edge cases (perhaps workarounds) where this changes behavior.
    Source code(tar.gz)
    Source code(zip)
  • v2.0.2(Dec 8, 2016)

    • Fix cannot access clientX of undefined on some touch-enabled platforms.
    • Fixed a bug with multi-finger multitouch if > 1 finger triggered an event at the same time.
    Source code(tar.gz)
    Source code(zip)
  • v2.0.1(Dec 8, 2016)

  • v2.0.0(Dec 8, 2016)

    • This is a breaking change. See the changes below in the beta releases.
      • Note the changes to event callbacks and position / defaultPosition.
    • Changes from 2.0.0-beta3:
      • Small bugfixes for Flow 0.24 compatibility.
      • Don't assume global.SVGElement. Fixes JSDOM & #123.
    Source code(tar.gz)
    Source code(zip)
  • v2.0.0-beta3(Dec 8, 2016)

    • Flow comments are now in the build. Other projects, such as React-Grid-Layout and React-Resizable, will rely on them in their build and export their own comments.
    Source code(tar.gz)
    Source code(zip)
  • v2.0.0-beta2(Dec 8, 2016)

    • We're making a small deviation from React Core's controlled vs. uncontrolled scheme; for convenience, <Draggable>s with a position property will still be draggable, but will revert to their old position on drag stop. Attach an onStop or onDrag handler to synchronize state.
      • A warning has been added informing users of this. If you make <Draggable> controlled but attach no callback handlers, a warning will be printed.
    Source code(tar.gz)
    Source code(zip)
  • v2.0.0-beta1(Dec 8, 2016)

    • Due to API changes, this is a major release.

    Breaking Changes:

    • Both <DraggableCore> and <Draggable> have had their callback types changed and unified.
    type DraggableEventHandler = (e: Event, data: DraggableData) => void | false;
    type DraggableData = {
      node: HTMLElement,
      // lastX + deltaX === x
      x: number, y: number,
      deltaX: number, deltaY: number,
      lastX: number, lastY: number
    };
    
    • The start option has been renamed to defaultPosition.
    • The zIndex option has been removed.

    Possibly Breaking Changes:

    • When determining deltas, we now use a new method that checks the delta against the Draggable's offsetParent. This method allows us to support arbitrary nested scrollable ancestors without scroll handlers!
      • This may cause issues in certain layouts. If you find one, please open an issue.

    Enhancements:

    • <Draggable> now has a position attribute. Its relationship to defaultPosition is much like value to defaultValue on React <input> nodes. If set, the position is fixed and cannot be mutated. If empty, the component will manage its own state. See #140 for more info & motivations.
    • Misc. bugfixes.
    Source code(tar.gz)
    Source code(zip)
  • v1.4.0-beta1(Dec 8, 2016)

    • Major improvements to drag tracking that now support even nested scroll boxes.
      • This revision is being done as a pre-release to ensure there are no unforeseen issues with the offset changes.
    Source code(tar.gz)
    Source code(zip)
  • v1.3.7(Dec 8, 2016)

  • v1.3.6(Dec 8, 2016)

  • v1.3.5(Dec 8, 2016)

    • Add React v15 to devDeps. <Draggable> supports both v0.14 and v15.
    • Enhancement: Clean up usage of browser prefixes; modern browsers will no longer use them.
      • This also removes the duplicated user-select style that is created on the <body> while dragging.
    • Internal: Test fixes.
    Source code(tar.gz)
    Source code(zip)
  • v1.3.4(Dec 8, 2016)

  • v1.3.3(Dec 8, 2016)

  • v1.3.2(Dec 8, 2016)

  • v1.3.1(Dec 8, 2016)

    • Internal: Babel 6 and Flow definitions
    • Bugfix: 1.3.0 broke string bounds ('parent', selectors, etc.).
    • Bugfix: 1.3.0 wasn't updating deltaX and deltaY on a bounds hit.
    Source code(tar.gz)
    Source code(zip)
  • v1.3.0(Dec 8, 2016)

    • Possibly breaking change: bounds are calculated before <Draggable> fires drag events, as they should have been.
    • Added 'none' axis type. This allows using <Draggable> somewhat like <DraggableCore> - state will be kept internally (which makes bounds checks etc possible), but updates will not be flushed to the DOM.
    • Performance tweaks.
    Source code(tar.gz)
    Source code(zip)
  • v1.2.0(Dec 8, 2016)

    • Added arbitrary boundary selector. Now you don't have to just use 'parent', you can select any element on the page, including 'body'.
    • Bugfix: Prevent invariant if a <Draggable> is unmounted while dragging.
    • Bugfix: Fix #133, where items would eagerly start dragging off the mouse cursor if you hit boundaries and came back. This is due to how <DraggableCore> handles deltas only and does not keep state. Added new state properties slackX and slackY to <Draggable> to handle this and restore pre-v1 behavior.
    Source code(tar.gz)
    Source code(zip)
  • v1.1.3(Dec 8, 2016)

  • v1.1.2(Dec 8, 2016)

    • Bugfix: <Draggable> was calling back with clientX/Y, not offsetX/Y as it did pre-1.0. This unintended behavior has been fixed and a test has been added.
    Source code(tar.gz)
    Source code(zip)
  • v1.1.1(Dec 8, 2016)

    • Bugfix: Clean up scroll events if a component is unmounted before drag stops.
    • Bugfix: NaN was returning from scroll events due to event structure change.
    • Add scroll drag modulation test.
    Source code(tar.gz)
    Source code(zip)
  • v1.1.0(Dec 8, 2016)

  • v1.0.2(Dec 8, 2016)

  • v1.0.1(Dec 8, 2016)

  • v1.0.0(Dec 8, 2016)

    • Breaking: Removed resetState() instance method
    • Breaking: Removed moveOnStartChange prop
    • Breaking: React 0.14 support only.
    • Refactored project.
    • Module now exports a <DraggableCore> element upon which <Draggable> is based. This module is useful for building libraries and is completely stateless.
    Source code(tar.gz)
    Source code(zip)
Owner
RGL
Organization for maintenance of React-Grid-Layout and associated repositories
RGL
A draggable and resizable grid layout with responsive breakpoints, for React.

React-Grid-Layout React-Grid-Layout is a grid layout system much like Packery or Gridster, for React. Unlike those systems, it is responsive and suppo

RGL 16.9k Jan 4, 2023
Makes the HTML element dialog draggable

Makes the HTML element dialog draggable

Naeemo 2 Sep 9, 2022
React tooltip is a React.JS Component that brings usefull UX and UI information in selected elements of your website.

React Tooltip ✅ React tooltip is a React.JS Component that brings usefull UX and UI information in elements of your website. Installation ⌨️ React Too

Marc Ramos 1 Dec 22, 2021
A react component available on npm to easily link to your project on github and is made using React, TypeScript and styled-components.

fork-me-corner fork-me-corner is a react component available on npm to easily link to your project on github and is made using React, TypeScript and s

Victor Dantas 9 Jun 30, 2022
Recoil is an experimental state management library for React apps. It provides several capabilities that are difficult to achieve with React alone, while being compatible with the newest features of React.

Recoil · Recoil is an experimental set of utilities for state management with React. Please see the website: https://recoiljs.org Installation The Rec

Facebook Experimental 18.2k Jan 8, 2023
Material-UI is a simple and customizable component library to build faster, beautiful, and more accessible React applications. Follow your own design system, or start with Material Design.

Material-UI Quickly build beautiful React apps. Material-UI is a simple and customizable component library to build faster, beautiful, and more access

Material-UI 83.6k Dec 30, 2022
📓 The UI component explorer. Develop, document, & test React, Vue, Angular, Web Components, Ember, Svelte & more!

Build bulletproof UI components faster Storybook is a development environment for UI components. It allows you to browse a component library, view the

Storybook 75.8k Jan 4, 2023
The Select Component for React.js

React-Select The Select control for React. Initially built for use in KeystoneJS. See react-select.com for live demos and comprehensive docs. React Se

Jed Watson 25.6k Jan 3, 2023
A Higher Order Component using react-redux to keep form state in a Redux store

redux-form You build great forms, but do you know HOW users use your forms? Find out with Form Nerd! Professional analytics from the creator of Redux

Redux Form 12.6k Jan 3, 2023
Isolated React component development environment with a living style guide

Isolated React component development environment with a living style guide React Styleguidist is a component development environment with hot reloaded

Styleguidist 10.6k Jan 5, 2023
Markdown component for React

react-markdown Markdown component for React using remark. Learn markdown here and check out the demo here. Install npm: npm install react-markdown Why

remark 9.7k Jan 4, 2023
A React Component library implementing the Base design language

Base Web React Components Base is a design system comprised of modern, responsive, living components. Base Web is the React implementation of Base. Us

Uber Open Source 8.1k Dec 29, 2022
Accessible modal dialog component for React

react-modal Accessible modal dialog component for React.JS Table of Contents Installation API documentation Examples Demos Installation To install, yo

React Community 7.1k Jan 1, 2023
Source code for my tutorial on how to build customizable table component with React Table and Tailwind CSS.

React Table + Tailwind CSS = ❤️ Source code for my tutorial on how to build customizable table component with React Table and Tailwind CSS. Both parts

Samuel Liedtke 147 Jan 7, 2023
A headless React component that lets you control how visible and overflown items are rendered 👀

react-overflow-list A hooks based implementation of the OverflowList component from Blueprint JS. Installation yarn add react-overflow-list Basic Usa

Matt Rothenberg 9 May 31, 2022
A react native component that lets you build a dynamic expandable chips list.

React Native Expandable Chips List A react native component that lets you build a dynamic expandable chips list. Installation Run npm install react-na

Daniel Cocos 13 Sep 23, 2022
React component library for displaying code samples with syntax highlighting!!

react-code-samples usage example: import {} from 'react-code-samples'; import 'highlight.js/styles/default.css'; // or use another highlight js style

Pranav Teegavarapu 8 Jan 3, 2022
Collection of Animated 60 FPS TabBar Component's based on React Navigation.

React Navigation TabBar Collection Collection of Animated 60 FPS TabBar Components based on React Navigation. Features 60 FPS Animation Beautiful TabB

Mikalyh 22 Dec 9, 2022
Accessible, unstyled, open-sourced, and fully functional react component library for building design systems

DORAI UI Accessible, unstyled, open-sourced and fully functional react component library for building design systems Documentation site coming soon St

Fakorede Boluwatife 38 Dec 30, 2022