| 1 | # react-dock
|
| 2 |
|
| 3 | Resizable dockable react component.
|
| 4 |
|
| 5 | #### Demo
|
| 6 |
|
| 7 | [http://alexkuz.github.io/react-dock/demo/](http://alexkuz.github.io/react-dock/demo/)
|
| 8 |
|
| 9 | #### Install
|
| 10 |
|
| 11 | ```
|
| 12 | $ npm i -S react-dock
|
| 13 | ```
|
| 14 |
|
| 15 | #### Example
|
| 16 |
|
| 17 | ```jsx
|
| 18 | render() {
|
| 19 | return (
|
| 20 | <Dock position='right' isVisible={this.state.isVisible}>
|
| 21 | {/* you can pass a function as a child here */}
|
| 22 | <div onClick={() => this.setState({ isVisible: !this.state.isVisible })}>X</div>
|
| 23 | </Dock>
|
| 24 | );
|
| 25 | }
|
| 26 | ```
|
| 27 |
|
| 28 | #### Dock Props
|
| 29 |
|
| 30 | | Prop Name | Description |
|
| 31 | | --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
| 32 | | position | Side to dock (`left`, `right`, `top` or `bottom`). Default is `left`. |
|
| 33 | | fluid | If `true`, resize dock proportionally on window resize. |
|
| 34 | | size | Size of dock panel (width or height, depending on `position`). If this prop is set, `Dock` is considered as a controlled component, so you need to use `onSizeChange` to track dock resizing. Value is a fraction of window width/height, if `fluid` is true, or pixels otherwise |
|
| 35 | | defaultSize | Default size of dock panel (used for uncontrolled `Dock` component) |
|
| 36 | | isVisible | If `true`, dock is visible |
|
| 37 | | dimMode | If `none` - content is not dimmed, if `transparent` - pointer events are disabled (so you can click through it), if `opaque` - click on dim area closes the dock. Default is `opaque` |
|
| 38 | | duration | Animation duration. Should be synced with transition animation in style properties |
|
| 39 | | dimStyle | Style for dim area |
|
| 40 | | dockStyle | Style for dock |
|
| 41 | | zIndex | Z-index for wrapper |
|
| 42 | | onVisibleChange | Fires when `Dock` wants to change `isVisible` (when opaque dim is clicked, in particular) |
|
| 43 | | onSizeChange | Fires when `Dock` wants to change `size` |
|
| 44 | | children | Dock content - react elements or function that returns an element. Function receives an object with these state values: `{ position, isResizing, size, isVisible }` |
|