react-dock
v0.7.0
Published
Resizable dockable react component
Downloads
229,061
Readme
react-dock
Resizable dockable react component.
Demo
http://alexkuz.github.io/react-dock/demo/
Install
$ npm i -S react-dock
Example
render() {
return (
<Dock position='right' isVisible={this.state.isVisible}>
{/* you can pass a function as a child here */}
<div onClick={() => this.setState({ isVisible: !this.state.isVisible })}>X</div>
</Dock>
);
}
Dock Props
| Prop Name | Description |
| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| position | Side to dock (left
, right
, top
or bottom
). Default is left
. |
| fluid | If true
, resize dock proportionally on window resize. |
| 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 |
| defaultSize | Default size of dock panel (used for uncontrolled Dock
component) |
| isVisible | If true
, dock is visible |
| 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
|
| duration | Animation duration. Should be synced with transition animation in style properties |
| dimStyle | Style for dim area |
| dockStyle | Style for dock |
| zIndex | Z-index for wrapper |
| onVisibleChange | Fires when Dock
wants to change isVisible
(when opaque dim is clicked, in particular) |
| onSizeChange | Fires when Dock
wants to change size
|
| children | Dock content - react elements or function that returns an element. Function receives an object with these state values: { position, isResizing, size, isVisible }
|