diff --git a/README.md b/README.md index 9e7c67ed..dd150236 100644 --- a/README.md +++ b/README.md @@ -17,119 +17,128 @@ See the [demo](/examples/TestLayout.js) for more on this. ### Installation - $ npm install --save react-resizable +```js +$ npm install react-resizable +``` + +```js +$ yarn add react-resizable +``` ### Compatibility -[React-Resizable 3.x](/CHANGELOG.md#3.0.0) is compatible with React `>= 16.3`. -React-Resizable 2.x has been skipped. -[React-Resizable 1.x](/CHANGELOG.md#1.11.1) is compatible with React `14-17`. +- [React-Resizable 3.x](/CHANGELOG.md#3.0.0) is compatible with React `>= 16.3`. +- React-Resizable 2.x has been skipped. +- [React-Resizable 1.x](/CHANGELOG.md#1.11.1) is compatible with React `14-17`. ### Usage This package has two major exports: -* [``](/lib/Resizable.js): A raw component that does not have state. Use as a building block for larger components, by listening to its - callbacks and setting its props. -* [``](/lib/ResizableBox.js): A simple `
` element that manages basic state. Convenient for simple use-cases. - +- [``](/lib/Resizable.js): A raw component that does not have state. Use as a building block for larger components, by listening to its + callbacks and setting its props. +- [``](/lib/ResizableBox.js): A simple `
` element that manages basic state. Convenient for simple use-cases. #### `` + ```js -const {Resizable} = require('react-resizable'); +const { Resizable } = require('react-resizable') // ES6 -import { Resizable } from 'react-resizable'; +import { Resizable } from 'react-resizable' -// ... class Example extends React.Component { - state = { - width: 200, - height: 200, - }; - - // On top layout - onResize = (event, {node, size, handle}) => { - this.setState({width: size.width, height: size.height}); - }; - - render() { - return ( - -
- Contents -
- - ); - } + state = { + width: 200, + height: 200 + } + + // On top layout + onResize = (event, { node, size, handle }) => { + this.setState({ width: size.width, height: size.height }) + } + + render() { + return ( + +
+ Contents +
+ + ) + } } - ``` - #### `` + ```js -const {ResizableBox} = require('react-resizable'); +const { ResizableBox } = require('react-resizable') // ES6 -import { ResizableBox } from 'react-resizable'; +import { ResizableBox } from 'react-resizable' class Example extends React.Component { - render() { - return ( - - Contents - - ); - } + render() { + return ( + + Contents + + ) + } } ``` -### Props +## Props + +### `` and `` Props These props apply to both `` and ``. Unknown props that are not in the list below will be passed to the child component. +### ResizeCallbackData + +| Property | Type | +| -------- | --------------------------------- | +| node | HTMLElement | +| size | { width: number, height: number } | +| handle | ResizeHandleAxis | + +### ResizeHandleAxis + ```js -type ResizeCallbackData = { - node: HTMLElement, - size: {width: number, height: number}, - handle: ResizeHandleAxis -}; -type ResizeHandleAxis = 's' | 'w' | 'e' | 'n' | 'sw' | 'nw' | 'se' | 'ne'; - -type ResizableProps = -{ - children: React.Element, - width: number, - height: number, - // Either a ReactElement to be used as handle, or a function returning an element that is fed the handle's location as its first argument. - handle: ReactElement | (resizeHandle: ResizeHandleAxis, ref: ReactRef) => ReactElement, - // If you change this, be sure to update your css - handleSize: [number, number] = [10, 10], - lockAspectRatio: boolean = false, - axis: 'both' | 'x' | 'y' | 'none' = 'both', - minConstraints: [number, number] = [10, 10], - maxConstraints: [number, number] = [Infinity, Infinity], - onResizeStop?: ?(e: SyntheticEvent, data: ResizeCallbackData) => any, - onResizeStart?: ?(e: SyntheticEvent, data: ResizeCallbackData) => any, - onResize?: ?(e: SyntheticEvent, data: ResizeCallbackData) => any, - draggableOpts?: ?Object, - resizeHandles?: ?Array = ['se'] -}; +type ResizeHandleAxis = 's' | 'w' | 'e' | 'n' | 'sw' | 'nw' | 'se' | 'ne' ``` +### ResizableProps + +| Property | Type | Optional | Default | +| --------------- | ---------------------------------------------------- | -------- | --------------------------------------- | +| axis | 'both' \| 'x' \| 'y' \| 'none' | | 'both' | +| children | React.Element\ | | | +| draggableOpts | Object | true | | +| handle | ReactElement\ or Function | | | +| handleSize | [number, number] | | [10, 10] | +| height | number | | | +| lockAspectRatio | boolean | | false | +| maxConstraints | { [width: number, height: number] } | | { [width: Infinity, height: Infinity] } | +| minConstraints | { [width: number, height: number] } | | { [width: 10, height: 10] } | +| onResize? | (e: SyntheticEvent, data: ResizeCallbackData) => any | true | | +| onResizeStart? | (e: SyntheticEvent, data: ResizeCallbackData) => any | true | | +| onResizeStop? | (e: SyntheticEvent, data: ResizeCallbackData) => any | true | | +| resizeHandles? | Array\ | true | ['se'] | +| width | number | | | + +### `` Props + The following props can also be used on ``: -```js -{ - style?: Object // styles the returned
-} -``` +| Property | Type | Optional +| -------- | ------ | -------- +| style | Object | true If a `width` or `height` is passed to ``'s `style` prop, it will be ignored as it is required for internal function. -#### Resize Handle +## Resize Handle If you override the resize handle, we expect that any `ref` passed to your new handle with represent the underlying DOM element. @@ -153,12 +162,12 @@ You must [forward the ref](https://reactjs.org/docs/forwarding-refs.html) and pr ```js class MyHandleComponent extends React.Component { - render() { - const {handleAxis, innerRef, ...props} = this.props; - return
- } + render() { + const { handleAxis, innerRef, ...props } = this.props + return
+ } } -const MyHandle = React.forwardRef((props, ref) => ); +const MyHandle = React.forwardRef((props, ref) => ) } /> ``` @@ -167,9 +176,9 @@ const MyHandle = React.forwardRef((props, ref) => { - const {handleAxis, ...restProps} = props; - return
; -}); + const { handleAxis, ...restProps } = props + return
+}) } /> ``` @@ -180,8 +189,8 @@ You can define a function as a handle, which will simply receive an axis (see ab ```js const MyHandle = (props) => { - return
; -}; + return
+} } /> -``` \ No newline at end of file +```