# react-draggable-ball

> react-draggable-ball;拖拽控制球

Latest version **0.1.0** (published 2020-09-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-draggable-ball
pnpm add react-draggable-ball
yarn add react-draggable-ball
bun add react-draggable-ball
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2020-09-24 |
| First published | 2020-09-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 8.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | yehuozhili |
| Maintainers | yehuozhili |

## Links

- npm: https://www.npmjs.com/package/react-draggable-ball
- Homepage: http:///react-draggable-ball
- npm.io page: https://npm.io/package/react-draggable-ball

## Dependencies (1)

- [react-draggable](https://npm.io/package/react-draggable.md) ^4.4.3

## Recent versions

- 0.1.0 (latest) — 2020-09-24

## README

## react-draggable-ball 拖拽控制小球

### 简介

-   有时候可能需要那种像手游一样的操作球来控制另一个物体的位置，所以我利用 react-draggable 封装起来做了个包。
-   控制的物体不一定要可拖动，不可拖动也可以的。

-   https://yehuozhili.github.io/react-draggable-ball/

### 快速上手

-   demo 中的示例为此示例

```tsx
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

```tsx
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>> //可以改变小球在壳里位置
];
```

---
_Source: https://npm.io/package/react-draggable-ball · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._