React-dock NPM

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 }`