react-dock

library0.8.0jsnpmunverified

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.

web-framework

npm install react-dock

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-DOCK

react-dock

web-frameworkjavascriptv0.8.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Dock

✓ import Dock from 'react-dock'

✗ import { Dock } from 'react-dock'

Default export, not named. Common mistake is trying named import.

default

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

✗ const Dock = require('react-dock')

CJS users must access .default on the module or set esModuleInterop: true.

Dock

✓ import D from 'react-dock'

✗ import * as Dock from 'react-dock'

Namespace import will yield object with default property; not recommended.

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;

Debug

Known issues

gotchaDock 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.

affects: >=0.1.0

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

fix

No fix yet; monitor package for React 19 compatibility.

affects: >=0.7.0

gotchaWhen 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.

affects: >=0.5.0

gotchadimMode='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.

affects: >=0.1.0

Errors

Common errors & fixes

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

Named import instead of default import.

fix

import Dock from 'react-dock';

TypeError: dock_default is not a constructor

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

fix

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

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

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

fix

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

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

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

fix

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

Upgrade

Version history

0.8.0latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/reduxjs/redux-devtools ↗

packagehttps://www.npmjs.com/package/react-dock ↗