@uiw/react-drag-event-interactive
v2.9.4TypeScript
react drag event interactive
reactreact-colorreact-componentcolor-pickercolorpickercolor pickercolorfulreact-interactiveinteractivecolor
0/weekUpdated 1 weeks agoMITUnpacked: 30.3 KB
Published by Kenny Wong
npm install @uiw/react-drag-event-interactive
React Drag Event Interactive
===
  
Interactive Component is a subcomponent of @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 (
onMove={handleChange}
onDown={handleChange}
>
{JSON.stringify(data, null, 2)}
);
}
export default Demo;
`
Props
`ts``
import React from 'react';
export declare function useEventCallback
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.
License
Licensed under the MIT License.