^{Using my app is also a way to support me:}

React Drag Event Interactive === [![Buy me a coffee](https://img.shields.io/badge/Buy_Me_a_Coffee-ffdd00?logo=buy-me-a-coffee&logoColor=black)](https://jaywcjlove.github.io/#/sponsor) [![Follow On X](https://img.shields.io/badge/Follow%20on%20X-333333?logo=x&logoColor=white)](https://x.com/jaywcjlove) [![npm version](https://img.shields.io/npm/v/@uiw/react-drag-event-interactive.svg)](https://www.npmjs.com/package/@uiw/react-drag-event-interactive) [![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-drag-event-interactive/file/README.md) Interactive Component is a subcomponent of [**`@react-color`**](https://uiwjs.github.io/react-color). ## Install ```bash npm i @uiw/react-drag-event-interactive ``` ## Usage ```jsx mdx:preview import React, { useState } from 'react'; import Interactive from '@uiw/react-drag-event-interactive'; const pointStyle = { width: 5, height: 5, backgroundColor: '#fff', position: 'absolute', borderRadius: 3, border: '1px solid rgb(51, 51, 51)' } const wrapper = { width: 120, height: 120, background: 'red', position: 'relative' } function Demo() { const [data, setData] = useState({ left: 0.10, top: 0.10, }) const handleChange = (interaction, event) => setData(interaction); const point = { left: `${data.left * 100}%`, top: `${data.top * 100}%`, ...pointStyle } return (

        {JSON.stringify(data, null, 2)}

); } export default Demo; ``` ## Props ```ts import React from 'react'; export declare function useEventCallback(handler?: (value: T, event: K) => void): (value: T, event: K) => void; export declare const isTouch: (event: MouseEvent | TouchEvent) => event is TouchEvent; export declare const preventDefaultMove: (event: MouseEvent | TouchEvent) => void; export declare const clamp: (number: number, min?: number, max?: number) => number; export interface Interaction { left: number; top: number; width: number; height: number; x: number; y: number; } export declare const getRelativePosition: (node: HTMLDivElement, event: MouseEvent | TouchEvent) => Interaction; export interface InteractiveProps extends React.HTMLAttributes { prefixCls?: string; onMove?: (interaction: Interaction, event: MouseEvent | TouchEvent) => void; onDown?: (offset: Interaction, event: MouseEvent | TouchEvent) => void; } ``` ## Contributors As always, thanks to our amazing contributors!

Made with [contributors](https://github.com/jaywcjlove/github-action-contributors). ## License Licensed under the MIT License.