0.1.0 • Published 4 years ago
react-draggable-ball v0.1.0
react-draggable-ball 拖拽控制小球
简介
- 有时候可能需要那种像手游一样的操作球来控制另一个物体的位置,所以我利用 react-draggable 封装起来做了个包。
控制的物体不一定要可拖动,不可拖动也可以的。
快速上手
- demo 中的示例为此示例
import React, { useState } from "react";
import Draggable, { DraggableEvent, DraggableData } from "react-draggable";
import { useGetBall } from "react-draggable-ball";
function App() {
const [state, setState] = useState({ x: 0, y: 0 });
const [render, isDrag, , position] = useGetBall(setState, {
ratioSpeed: { x: 0.5, y: 0.5 },
});
return (
<div className="App">
<Draggable
position={state}
onStop={(e: DraggableEvent, data: DraggableData) => {
setState({ x: data.x, y: data.y });
}}
>
<div
style={{
width: "100px",
height: "100px",
backgroundColor: "red",
}}
></div>
</Draggable>
<div
style={{
width: "100px",
height: "100px",
backgroundColor: "blue",
position: "relative",
transform: `translate(${state.x}px,${state.y}px)`,
}}
></div>
<div>{isDrag}</div>
<div>
{state.x},{state.y}
</div>
<div>
{position.x},{position.y}
</div>
{render}
</div>
);
}
export default App;
api
export interface IOptionsType {
wrapperStyle?: CSSProperties; //这是外壳样式
innerStyle?: CSSProperties; // 拖动的小球样式
intervalDelay?: number; //interval延迟,越大,移动看起来越卡
ratioSpeed?: IPositionState; //速度比率,用来控制state速度
draggableProps?: Partial<DraggableProps>; //参考react-draggable属性
innerContent?: ReactNode; //小球内容物,初始为null
}
export interface IPositionState {
x: number;
y: number;
}
//必传setState,用来控制
export function useGetBall(
setState: React.Dispatch<React.SetStateAction<IPositionState>>,
options?: IOptionsType
): [
ReactNode, //这是渲染出来的拖拽小球
boolean, //这是小球是否在拖拽状态
React.Dispatch<React.SetStateAction<boolean>>, //这个可以改变是否拖拽状态
IPositionState, //这是小球在壳里的位置
React.Dispatch<React.SetStateAction<IPositionState>> //可以改变小球在壳里位置
];
0.1.0
4 years ago