{"id":18708,"library":"react-dock","title":"react-dock","description":"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.","status":"maintenance","version":"0.8.0","language":"javascript","source_language":"en","source_url":"https://github.com/reduxjs/redux-devtools","tags":["javascript","react","reactjs","dock","sidebar","typescript"],"install":[{"cmd":"npm install react-dock","lang":"bash","label":"npm"},{"cmd":"yarn add react-dock","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-dock","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Default export, not named. Common mistake is trying named import.","wrong":"import { Dock } from 'react-dock'","symbol":"Dock","correct":"import Dock from 'react-dock'"},{"note":"CJS users must access .default on the module or set esModuleInterop: true.","wrong":"const Dock = require('react-dock')","symbol":"default","correct":"const Dock = require('react-dock').default"},{"note":"Namespace import will yield object with default property; not recommended.","wrong":"import * as Dock from 'react-dock'","symbol":"Dock","correct":"import D from 'react-dock'"}],"quickstart":{"code":"import React, { useState } from 'react';\nimport Dock from 'react-dock';\n\nfunction App() {\n  const [visible, setVisible] = useState(true);\n  return (\n    <div>\n      <button onClick={() => setVisible(!visible)}>Toggle Dock</button>\n      <Dock position=\"right\" isVisible={visible} defaultSize={0.3} fluid={true}>\n        <div style={{ padding: 20 }}>\n          <p>Dock content</p>\n        </div>\n      </Dock>\n    </div>\n  );\n}\n\nexport default App;","lang":"typescript","description":"Shows basic uncontrolled Dock with toggle button, right-aligned, fluid 30% width."},"warnings":[{"fix":"Set duration prop to match your custom CSS transition duration.","message":"Dock uses CSS transitions with a default duration of 300ms. If you override transition styles, ensure duration prop matches.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"No fix yet; monitor package for React 19 compatibility.","message":"React.createElement is deprecated in future React versions; Dock may need updates.","severity":"deprecated","affected_versions":">=0.7.0"},{"fix":"Set onSizeChange callback that updates state. Alternatively, use defaultSize for uncontrolled mode.","message":"When using size prop (controlled mode), you must provide onSizeChange handler or dock will not resize.","severity":"gotcha","affected_versions":">=0.5.0"},{"fix":"Use dimMode='opaque' for click-to-close behavior.","message":"dimMode='transparent' disables pointer events on the dim area, making all events pass through. Can be confusing if you expect click-to-close.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"import Dock from 'react-dock';","cause":"Named import instead of default import.","error":"Module '\"react-dock\"' has no exported member 'Dock'."},{"fix":"const Dock = require('react-dock').default;","cause":"In CJS, require returns the module object, not the default export.","error":"TypeError: dock_default is not a constructor"},{"fix":"Update to latest react-dock or wrap in non-strict mode.","cause":"Using Dock with React 18+ strict mode and missing default props.","error":"TypeError: Cannot read properties of undefined (reading 'prototype')"},{"fix":"Use default import: import Dock from 'react-dock';","cause":"Typically caused by using named import { Dock } instead of default.","error":"React.createElement: type is invalid -- expected a string (for built-in components) or a class/function but got: object."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}