# react-dock

> Resizable dockable react component

Latest version **0.8.0** (published 2025-03-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-dock
pnpm add react-dock
yarn add react-dock
bun add react-dock
```

## Health

**Score 60/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities; high maintenance score; high quality score; popular repo.

Warnings: low downloads; pre 1.0.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 0.8.0 |
| Published | 2025-03-01 |
| First published | 2015-09-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 34.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 14369 |
| Author | Alexander |
| Maintainers | alexkuz, methuselah96 |
| Keywords | react, reactjs, dock, sidebar |

## Links

- npm: https://www.npmjs.com/package/react-dock
- Repository: https://github.com/reduxjs/redux-devtools
- Issues: https://github.com/reduxjs/redux-devtools/issues
- npm.io page: https://npm.io/package/react-dock

## Dependencies (2)

- [lodash-es](https://npm.io/package/lodash-es.md) ^4.17.21
- [@types/lodash-es](https://npm.io/package/@types/lodash-es.md) ^4.17.12

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.8.0 (latest) — 2025-03-01
- 0.7.0 — 2024-04-07
- 0.6.0 — 2022-05-30
- 0.5.1 — 2022-01-25
- 0.5.0 — 2022-01-10
- 0.4.2 — 2022-01-08
- 0.4.1 — 2021-11-06
- 0.4.0 — 2021-03-06
- 0.3.0 — 2020-09-07
- 0.2.4 — 2017-04-22
- 0.2.3 — 2015-10-20
- 0.2.2 — 2015-10-17
- 0.2.1 — 2015-10-16
- 0.2.0 — 2015-10-08
- 0.1.2 — 2015-10-08
- … 5 more at https://npm.io/package/react-dock/versions

## README

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

---
_Source: https://npm.io/package/react-dock · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._