@uiw/react-drag-event-interactive

react drag event interactive

Usage no npm install needed!

<script type="module">
  import uiwReactDragEventInteractive from 'https://cdn.skypack.dev/@uiw/react-drag-event-interactive';
</script>

README

React Drag Event Interactive

npm bundle size npm version Open in unpkg

Interactive Component is a subcomponent of @react-color.

Install

npm i @uiw/react-drag-event-interactive

Usage

import Interactive from '@uiw/react-drag-event-interactive';

function Demo() {
  return (
    <Interactive hsva={{ h: 0, s: 75, v: 82, a: 1 }} />
  );
}

Props

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;
}

License

Licensed under the MIT License.