react-dock

0.8.0 verified Sat Apr 25 auth: no javascript maintenance

Resizable dockable React component that allows creating draggable side panels for layouts. Current stable version is 0.8.0, with infrequent releases. Supports React 16.3+ through 19. Ships TypeScript types. Unlike generic resizable panels, react-dock is purpose-built for docking to edges and dimming overlay modes (opaque, transparent, none). Ideal for sidebars, devtools, or notification panels. Peer dependencies: @types/react and react. Old but stable; no known breaking changes in recent history.

Common errors

error Module '"react-dock"' has no exported member 'Dock'. ↓

cause Named import instead of default import.

fix

import Dock from 'react-dock';

error TypeError: dock_default is not a constructor ↓

cause In CJS, require returns the module object, not the default export.

fix

const Dock = require('react-dock').default;

error TypeError: Cannot read properties of undefined (reading 'prototype') ↓

cause Using Dock with React 18+ strict mode and missing default props.

fix

Update to latest react-dock or wrap in non-strict mode.

error React.createElement: type is invalid -- expected a string (for built-in components) or a class/function but got: object. ↓

cause Typically caused by using named import { Dock } instead of default.

fix

Use default import: import Dock from 'react-dock';

Warnings

gotcha Dock uses CSS transitions with a default duration of 300ms. If you override transition styles, ensure duration prop matches. ↓

fix Set duration prop to match your custom CSS transition duration.

deprecated React.createElement is deprecated in future React versions; Dock may need updates. ↓

fix No fix yet; monitor package for React 19 compatibility.

gotcha When using size prop (controlled mode), you must provide onSizeChange handler or dock will not resize. ↓

fix Set onSizeChange callback that updates state. Alternatively, use defaultSize for uncontrolled mode.

gotcha dimMode='transparent' disables pointer events on the dim area, making all events pass through. Can be confusing if you expect click-to-close. ↓

fix Use dimMode='opaque' for click-to-close behavior.

Install

npm install react-dock

yarn add react-dock

pnpm add react-dock

Imports

Dock
wrong
```
import { Dock } from 'react-dock'
```
correct
```
import Dock from 'react-dock'
```
Default export, not named. Common mistake is trying named import.
default
wrong
```
const Dock = require('react-dock')
```
correct
```
const Dock = require('react-dock').default
```
CJS users must access .default on the module or set esModuleInterop: true.
Dock
wrong
```
import * as Dock from 'react-dock'
```
correct
```
import D from 'react-dock'
```
Namespace import will yield object with default property; not recommended.

Quickstart

Shows basic uncontrolled Dock with toggle button, right-aligned, fluid 30% width.

import React, { useState } from 'react';
import Dock from 'react-dock';

function App() {
  const [visible, setVisible] = useState(true);
  return (
    <div>
      <button onClick={() => setVisible(!visible)}>Toggle Dock</button>
      <Dock position="right" isVisible={visible} defaultSize={0.3} fluid={true}>
        <div style={{ padding: 20 }}>
          <p>Dock content</p>
        </div>
      </Dock>
    </div>
  );
}

export default App;