@uiw/react-drag-event-interactive NPM

React Drag Event Interactive

Interactive Component is a subcomponent of @react-color.

Install

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

Usage

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 (
    <div>
      <Interactive
        style={wrapper}
        onMove={handleChange}
        onDown={handleChange}
      >
        <div style={point} />
      </Interactive>
      <pre>
        {JSON.stringify(data, null, 2)}
      </pre>
    </div>
  );
}

export default Demo;

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