react-reactresizableandmovable可调整大小可拖动的React

<p align="center"><img src ="https://github.com/bokuweb/react-rnd/blob/master/logo.png?raw=true" /></p> <p align="center">A resizable and draggable component for React.</p> <p align="center"><a href="https://circleci.com/gh/bokuweb/react-rnd/tree/master"> <img src="https://circleci.com/gh/bokuweb/react-rnd/tree/master.svg?style=svg" alt="Build Status" /></a> <a href="https://www.npmjs.com/package/react-rnd"> <img src="https://img.shields.io/npm/v/react-rnd.svg" alt="Build Status" /></a> <a href="https://www.npmjs.com/package/react-rnd"> <img src="https://img.shields.io/npm/dm/react-rnd.svg" /></a> <a href="https://renovatebot.com/"> <img src="https://img.shields.io/badge/renovate-enabled-brightgreen.svg" /></a> <a href="https://github.com/prettier/prettier"> <img src="https://img.shields.io/badge/styled_with-prettier-ff69b4.svg" /></a> <a href="https://bokuweb.github.io/react-rnd/stories"> <img src="https://github.com/storybooks/press/blob/master/badges/storybook.svg" /></a> </p> ## Table of Contents * [Screenshot](#Screenshot) * [Live Demo](#live-demo) * [Storybook](#storybook) * [CodeSandbox](#codesandbox) * [Install](#install) * [Usage](#usage) * [Props](#props) * [Instance API](#instance-api) * [updateSize(size: { width: number | string, height: number | string }): void](#updateSize-void) * [updatePosition({ x: number, y: number }): void](#updatePosition-void) * [Test](#test) * [Related](#related) * [Changelog](#changelog) * [License](#license) ## Screenshot <p align="center"> <img src="https://raw.githubusercontent.com/bokuweb/react-rnd/master/screenshot.gif" /> </p> https://codesandbox.io/s/xpm699v4lp ## Live Demo ### Storybook [Storybook](http://bokuweb.github.io/react-rnd/stories) ### CodeSandbox [](https://codesandbox.io/s/y3997qply9) [CodeSandbox(with default)](https://codesandbox.io/s/y3997qply9) [CodeSandbox(with size and position)](https://codesandbox.io/s/my4kjly94x) [CodeSandbox(with typescript)](https://codesandbox.io/s/j1vvkpo9wv) ## Install - use npm ```sh npm i -S react-rnd ``` - use yarn ```sh yarn add react-rnd ``` ## Usage ### Example with `default` ``` javascript <Rnd default={{ x: 0, y: 0, width: 320, height: 200, }} > Rnd </Rnd> ``` ### Example with `position` and `size` ``` javascript <Rnd size={{ width: this.state.width, height: this.state.height }} position={{ x: this.state.x, y: this.state.y }} onDragStop={(e, d) => { this.setState({ x: d.x, y: d.y }) }} onResize={(e, direction, ref, delta, position) => { this.setState({ width: ref.style.width, height: ref.style.height, ...position, }); }} > 001 </Rnd> ``` ## Props #### `default: { x: number; y: number; width?: number | string; height?: number | string; };` The `width` and `height` property is used to set the default size of the component. For example, you can set `300`, `'300px'`, `50%`. If omitted, set `'auto'`. The `x` and `y` property is used to set the default position of the component. #### `size?: { width: (number | string), height: (number | string) };` The `size` property is used to set size of the component. For example, you can set 300, '300px', 50%. Use `size` if you need to control size state by yourself. #### `position?: { x: number, y: number };` The `position` property is used to set position of the component. Use `position` if you need to control size state by yourself. see, following example. ``` javascript <Rnd size={{ width: this.state.width, height: this.state.height }} position={{ x: this.state.x, y: this.state.y }} onDragStop={(e, d) => { this.setState({ x: d.x, y: d.y }) }} onResize={(e, direction, ref, delta, position) => { this.setState({ width: ref.offsetWidth, height: ref.offsetHeight, ...position, }); }} > 001 </Rnd> ``` #### `className?: string;` The `className` property is used to set the custom `className` of the component. #### `style?: { [key: string]: string };` The `style` property is used to set the custom `style` of the component. #### `minWidth?: number | string;` The `minWidth` property is used to set the minimum width of the component. For example, you can set `300`, `'300px'`, `50%`. #### `minHeight?: number | string;` The `minHeight` property is used to set the minimum height of the component. For example, you can set `300`, `'300px'`, `50%`. #### `maxWidth?: number | string;` The `maxWidth` property is used to set the maximum width of the component. For example, you can set `300`, `'300px'`, `50%`. #### `maxHeight?: number | string`; The `maxHeight` property is used to set the maximum height of the component. For example, you can set `300`, `'300px'`, `50%`. #### `resizeGrid?: [number, number];` The `resizeGrid` property is used to specify the increments that resizing should snap to. Defaults to `[1, 1]`. #### `dragGrid?: [number, number];` The `dragGrid` property is used to specify the increments that moving should snap to. Defaults to `[1, 1]`. #### `lockAspectRatio?: boolean | number;` The `lockAspectRatio` property is used to lock aspect ratio. Set to `true` to lock the aspect ratio based on the initial size. Set to a numeric value to lock a specific aspect ratio (such as `16/9`). If set to numeric, make sure to set initial height/width to values with correct aspect ratio. If omitted, set `false`. #### `lockAspectRatioExtraWidth?: number;` The `lockAspectRatioExtraWidth` property enables a resizable component to maintain an aspect ratio plus extra width. For instance, a video could be displayed 16:9 with a 50px side bar. If omitted, set `0`. #### `scale?: number;` Specifies the scale of the canvas your are dragging or resizing this element on. This allows you to, for example, get the correct drag / resize deltas while you are zoomed in or out via a transform or matrix in the parent of this element. If omitted, set `1`. #### `lockAspectRatioExtraHeight?: number;` The `lockAspectRatioExtraHeight` property enables a resizable component to maintain an aspect ratio plus extra height. For instance, a video could be displayed 16:9 with a 50px header bar. If omitted, set `0`. #### `dragHandleClassName?: string;` Specifies a selector to be used as the handle that initiates drag. Example: `handle`. #### `resizeHandleStyles?: HandleStyles;` The `resizeHandleStyles` property is used to override the style of one or more resize handles. Only the axis you specify will have its handle style replaced. If you specify a value for `right` it will completely replace the styles for the `right` resize handle, but other handle will still use the default styles. ``` javascript export type HandleStyles = { bottom?: React.CSSProperties, bottomLeft?: React.CSSProperties, bottomRight?: React.CSSProperties, left?: React.CSSProperties, right?: React.CSSProperties, top?: React.CSSProperties, topLeft?: React.CSSProperties, topRight?: React.CSSProperties } ``` #### `resizeHandleClasses?: HandleClasses;` The `resizeHandleClasses` property is used to set the className of one or more resize handles. ``` javascript type HandleClasses = { bottom?: string; bottomLeft?: string; bottomRight?: string; left?: string; right?: string; top?: string; topLeft?: string; topRight?: string; } ``` #### `resizeHandleWrapperClass?: string;` The `resizeHandleWrapperClass` property is used to set css class name of resize handle wrapper(`span`) element. #### `resizeHandleWrapperStyle?: Style;` The `resizeHandleWrapperStyle` property is used to set css class name of resize handle wrapper(`span`) element. #### `enableResizing?: ?Enable;` The `enableResizing` property is used to set the resizable permission of the component. The permission of `top`, `right`, `bottom`, `left`, `topRight`, `bottomRight`, `bottomLeft`, `topLeft` direction resizing. If omitted, all resizer are enabled. If