React-Draggable Disable with TypeScript

React-Draggable is a popular library that allows users to make any component draggable. However, sometimes you may need to disable the draggable feature of a component. In this guide, we will explore how to disable React-Draggable with TypeScript.

Prerequisites

Make sure you have a basic understanding of React and TypeScript before proceeding.

Installation

To use React-Draggable, you first need to install it:

npm install react-draggable

Disable React-Draggable

To disable React-Draggable, you need to add a new state variable to track whether or not the component should be draggable. Here's an example with TypeScript:

import React, { useState } from 'react';
import Draggable, { DraggableCore } from 'react-draggable';

interface Props {
  disabled: boolean;
}

const ExampleComponent: React.FC<Props> = ({ disabled }) => {
  const [draggable, setDraggable] = useState<boolean>(!disabled);

  const handleDrag = (e: any, data: any) => {
    // handle drag logic here
  };

  return (
    <DraggableCore
      handle=".handle"
      disabled={!draggable}
      onDrag={handleDrag}
    >
      <div className="handle">Drag Me</div>
    </DraggableCore>
  );
};

In this example, we pass a disabled prop to the component, which determines whether or not the component should be draggable. We set the initial state of draggable to the opposite value of disabled.

Next, we use the DraggableCore component instead of Draggable. We pass the disabled property to DraggableCore and set it to the opposite value of draggable. This means that when the component is disabled, the disabled property will be set to true, which will prevent the component from being dragged.

Conclusion

In this guide, we have explored how to disable React-Draggable with TypeScript. By using the disabled property of DraggableCore, we can easily disable the draggable feature of a component.