abuzar316/dragnow-react

The drag-and-drop feature in the dragnow-react library allows you to enhance your React applications with intuitive drag-and-drop functionality. With this feature, you can create interactive user interfaces and improve the user experience. This documentation will guide you through using the drag-and-drop feature in your React projects.

Dragnow-react

Features

• Draggable Components:
  • Easily make React components draggable by wrapping them in the Draggable component, enabling intuitive drag-and-drop interactions.
• Customization
  • Customize the drag-and-drop behavior with options like initial position, drag handles, and drop targets, allowing fine-grained control over the user experience.
• Event Handling
  • Respond to drag-related events such as drag start, drag move, and drag end by attaching event handlers to the Draggable component, enabling dynamic interactions and feedback.
• Interaction with Other Components
  • Define drop targets to create interactive experiences where draggable components can interact with and be dropped onto specific targets within your application.
• Accessibility
  • Ensure accessibility compliance by providing built-in support for keyboard navigation and screen readers, making your drag-and-drop interfaces usable by a wide range of users.

Install

npm install dragnow-react

Quickstart

import DragNow from "dragnow-react";

function App() {
  return (
    <div className=`app`>
        <DragNow>
          <h1>Drag Now</h1>
        </DragNow>
    </div>
  );
}

<DragNow>

import DragNow from "dragnow-react";

function App() {

  const handleGetPosition = (x, y, index) => {
    console.log(x, y, index);
  };

  return (
    <div className=`app`>
        <DragNow
          defaultPosition={{ x: 100, y: 100 }}
          getPosition={handleGetPosition}
          index={11}
        >
          <h1>Drag Now</h1>
        </DragNow>
    </div>
  );
}