https://github.com/devnax/react-movebox
https://github.com/devnax/react-movebox
Last synced: 7 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/devnax/react-movebox
- Owner: devnax
- License: mit
- Created: 2022-11-03T14:29:10.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-11-03T15:29:20.000Z (over 3 years ago)
- Last Synced: 2025-02-22T02:34:13.823Z (over 1 year ago)
- Language: TypeScript
- Size: 287 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Move any element
## Use
```js
import useMovebox from 'react-movebox'
const App = () => {
const [refs, state] = useMovebox({
defaultStyle: false, // optional
boundary: { // optional
width: 500,
height: 500
},
start: (s) => {
console.log(s);
},
moving: (s) => {
console.log(state);
},
end: (s) => {
console.log(s);
},
})
return (
);
};
ReactDOM.render(, document.getElementById('root'));
```
## Arguments
```js
const Args = {
defaultStyle?: boolean;
boundary?: {
width: number;
height: number;
};
start?: (state: StateProps) => void;
end?: (state: StateProps) => void;
moving?: (state: StateProps) => void;
}
```
## State Props
```js
const StateProps = {
pos: {
left: number,
top: number
},
initX: number,
initY: number,
height: number,
width: number,
isMouseDown: boolean,
}
```
## Refs
```
refs = {
boxRef: any,
handlerRef: any,
boundaryRef: any
}
```