@drake-design-studio/react-drag-it NPM

React Drag It!

This is a TypeScript implementation of the React Draggable library. It is designed to work with React 17 and higher and is compatible with both TypeScript and JavaScript projects.

Features

TypeScript support
Compatible with React 17 and higher
Includes a Storybook example

Installation

To install this library, you can use npm:

npm install @drake-design-studio/react-drag-it

or yarn:

yarn add @drake-design-studio/react-drag-it

Usage

Then, you can use it in your component:

import React from "react";
import { DragIt } from "@drake-design-studio/react-drag-it";

<DragIt axis="both">
  <div>Your draggable content here</div>
</DragIt>;

API

The DragIt component accepts the following props:

Prop	Description
`axis`	Determines which axis the draggable can move. Can be "x", "y", "both", or "none".
`buffer`	Adds some draggable buffer space around the draggable component.
`handle`	Selector to be used as the handle that initiates drag.
`defaultPosition`	The default position of the draggable component.
`position`	The controlled position of the draggable component.
`grid`	Specifies the increments by which the draggable should move.
`scale`	Scale factor for the draggable movement.
`onStart`	Callback when dragging starts.
`onDrag`	Callback when dragging.
`onStop`	Callback when dragging stops.

Examples

You can find examples of how to use the DragIt component in the DragIt.stories.tsx file.

Development

To start the development server for Storybook, run:

yarn run storybook

Testing

To run the tests for the DragIt component, run:

yarn test

Contributing

Contributions are welcome! Please open an issue or submit a pull request on the GitHub repository.

License

This project is licensed under the MIT License. See the LICENSE file for details.

react draggable react-component typescript

react

1.0.0

1 year ago