uiwjs
React Drag Event Interactive
Interactive Component is a subcomponent of @react-color.
Install
npm i @uiw/react-drag-event-interactiveUsage
`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<T, K>(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<HTMLDivElement> {
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.
License
Licensed under the MIT License.