https://github.com/alexkuz/react-dock

Resizable dockable react component
https://github.com/alexkuz/react-dock

Last synced: about 2 months ago
JSON representation

Resizable dockable react component

• Host: GitHub
• URL: https://github.com/alexkuz/react-dock
• Owner: alexkuz
• License: mit
• Archived: true
• Created: 2015-09-06T01:38:14.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2020-08-17T17:10:20.000Z (over 4 years ago)
• Last Synced: 2024-09-24T23:12:30.421Z (3 months ago)
• Language: JavaScript
• Homepage: http://alexkuz.github.io/react-dock/demo/
• Size: 312 KB
• Stars: 546
• Watchers: 13
• Forks: 76
• Open Issues: 20
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-react-components-all - react-dock - Resizable dockable react component. (Uncategorized / Uncategorized)
• awesome-list - react-dock - Resizable dockable react component. (Demos / JBoss Data Virtualization)
• awesome-react-components - react-dock - Resizable dockable react component. (UI Components / Overlay)
• awesome-react-components - react-dock - Resizable dockable react component. (UI Components / Overlay)

README

        
🏚
This package was merged into redux-devtools monorepo. Please refer to that repository for the latest updates, issues and pull requests.


---

# react-dock

Resizable dockable react component.

#### Demo

[http://alexkuz.github.io/react-dock/demo/](http://alexkuz.github.io/react-dock/demo/)

#### Install

```

$ npm i -S react-dock

```

#### Example

```jsx

render() {

  return (

    

      {/* you can pass a function as a child here */}

      
 this.setState({ isVisible: !this.state.isVisible })}>X

    

  );

}

```


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