{"id":14858,"library":"rc-dialog","title":"RC-Dialog","description":"rc-dialog is a foundational React UI component providing a highly customizable and accessible dialog (modal) implementation. It offers core functionalities like visibility control, masking, animation hooks, and keyboard interaction (e.g., Esc key to close). While version 10.0.0 is the latest stable release of `rc-dialog` as a standalone package, its active development has largely shifted to its successor, `@rc-component/dialog`. `rc-dialog` itself has not seen new releases or significant updates for over a year, suggesting it is now in a maintenance or deprecated state. Developers are generally advised to consider `@rc-component/dialog` for new projects or migrations due to its ongoing development and improved features, including enhanced focus management. This package prioritizes stateless design and easy customization via props like `prefixCls`, `className`, `classNames`, and `styles`, making it a flexible choice for various design systems.","status":"deprecated","version":"10.0.0","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/react-component/dialog","tags":["javascript","react","react-component","react-dialog","dialog","ui","typescript"],"install":[{"cmd":"npm install rc-dialog","lang":"bash","label":"npm"},{"cmd":"yarn add rc-dialog","lang":"bash","label":"yarn"},{"cmd":"pnpm add rc-dialog","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for React component rendering.","package":"react","optional":false},{"reason":"Peer dependency for rendering React components to the DOM.","package":"react-dom","optional":false}],"imports":[{"note":"The primary Dialog component is a default export in modern ESM environments, though the README shows CommonJS `require`.","wrong":"import { Dialog } from 'rc-dialog';","symbol":"Dialog","correct":"import Dialog from 'rc-dialog';"},{"note":"Import for TypeScript type definitions for Dialog component props. The type definition files are available under `lib/IDialogPropTypes.d.ts`.","symbol":"IDialogPropTypes","correct":"import type { IDialogPropTypes } from 'rc-dialog';"},{"note":"Type import for the internal DialogWrap component, which might be useful for advanced customization or type extension. Available under `lib/DialogWrap.d.ts`.","symbol":"DialogWrap","correct":"import type { DialogWrap } from 'rc-dialog';"}],"quickstart":{"code":"import React, { useState, useCallback } from 'react';\nimport ReactDOM from 'react-dom/client';\nimport Dialog from 'rc-dialog';\nimport 'rc-dialog/assets/index.css'; // Don't forget to import the default styles\n\nconst App = () => {\n  const [visible, setVisible] = useState(false);\n  const [title, setTitle] = useState('Basic Dialog');\n\n  const showDialog = useCallback(() => {\n    setVisible(true);\n  }, []);\n\n  const onClose = useCallback(() => {\n    console.log('Dialog closed!');\n    setVisible(false);\n  }, []);\n\n  return (\n    <div>\n      <button onClick={showDialog}>Open Dialog</button>\n      <Dialog\n        title={title}\n        visible={visible}\n        onClose={onClose}\n        maskClosable={true} // Allow closing by clicking the mask\n        keyboard={true}    // Allow closing by pressing Esc key\n        destroyOnClose={true} // Unmount children when dialog closes\n        className=\"my-custom-dialog\"\n        style={{ width: 500 }}\n      >\n        <p>This is the content of the dialog.</p>\n        <p>You can put any React elements here.</p>\n        <p>Current version: 10.0.0</p>\n        <button onClick={() => alert('Button inside dialog clicked!')}>Click Me</button>\n      </Dialog>\n    </div>\n  );\n};\n\nconst root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);\nroot.render(<App />);\n","lang":"typescript","description":"This quickstart demonstrates a basic functional React component using `rc-dialog`, including state management for visibility, custom title, and event handling for closing. It highlights essential props like `visible`, `onClose`, `maskClosable`, `keyboard`, and `destroyOnClose`, and includes the necessary CSS import."},"warnings":[{"fix":"Consider migrating to `@rc-component/dialog`. Review its documentation for potential API differences. For example, imports will change from `import Dialog from 'rc-dialog'` to `import Dialog from '@rc-component/dialog'`. Ensure you update styling references accordingly if any internal class names have changed.","message":"The `rc-dialog` package itself has not had a significant release or update since version 10.0.0, published over a year ago. Active development, bug fixes, and new features (like improved focus management and semantic close) are now occurring in the `@rc-component/dialog` package. Migrating from `rc-dialog` to `@rc-component/dialog` is strongly recommended for new projects or to receive ongoing support and features.","severity":"breaking","affected_versions":">=10.0.0"},{"fix":"Carefully test focus flow for all interactive elements within and outside the dialog. Ensure `keyboard` prop is used for Esc key closing. For complex scenarios, you might need to manually manage focus using `ref`s and the DOM API, or explore `focusTrap` options if available in newer versions of `@rc-component/dialog`.","message":"Focus management within modals, especially when dealing with nested dialogs or components that create their own focus traps (e.g., date pickers, select dropdowns), can lead to unexpected behavior where focus is incorrectly trapped or lost. This is a common issue for accessibility in UI libraries.","severity":"gotcha","affected_versions":"All versions"},{"fix":"Always include `import 'rc-dialog/assets/index.css';` in your entry file or a relevant component file. For custom styling, override these defaults using the `prefixCls`, `className`, `classNames`, or `style`/`styles` props.","message":"The default styles for `rc-dialog` are provided via a separate CSS file (`rc-dialog/assets/index.css`). Failing to import this CSS will result in an unstyled, potentially unusable dialog, as the component itself only provides the DOM structure and logic.","severity":"gotcha","affected_versions":"All versions"},{"fix":"For new projects or modern bundlers, prefer ESM imports: `import Dialog from 'rc-dialog';`. If you must use CommonJS, stick to `const Dialog = require('rc-dialog');` consistently. Ensure your build configuration correctly handles module resolution.","message":"Using `require('rc-dialog')` (CommonJS) alongside `import ... from 'rc-dialog'` (ESM) in a mixed environment can lead to build tool issues or unexpected import resolutions, especially in modern React applications predominantly using ESM.","severity":"gotcha","affected_versions":"<=10.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure that `onClose` or any visibility toggling function correctly updates the state to `false` (or the desired hidden state) and that there are no unintended side effects causing the dialog to immediately reopen. Example: `const onClose = useCallback(() => setVisible(false), []);`","cause":"Often occurs when the `visible` prop is controlled by a state variable, and the `onClose` handler directly sets the state without a conditional check, leading to an infinite re-render loop if not managed carefully.","error":"Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate."},{"fix":"Verify that elements are present in the DOM before attempting to focus them. If using `destroyOnClose`, consider alternative strategies for preserving focus, or explicitly set focus to the trigger element in the `afterClose` callback. For custom focus handling, use `getContainer` to control where the dialog mounts, ensuring it's part of the accessible DOM tree.","cause":"The dialog or its internal elements are attempting to set focus on an element that is not yet rendered, has been unmounted, or is not capable of being focused (e.g., a hidden element). This is common with `destroyOnClose` or asynchronous rendering.","error":"TypeError: Cannot read properties of undefined (reading 'focus') / Element not focusable"},{"fix":"First, ensure the package is installed: `npm install rc-dialog` or `yarn add rc-dialog`. Double-check the import statement `import Dialog from 'rc-dialog';`. If using a bundler like Webpack, ensure its module resolution configuration (e.g., `resolve.extensions`) is set up to handle `.js`, `.jsx`, `.ts`, `.tsx` files correctly.","cause":"The `rc-dialog` package is not correctly installed or the import path is incorrect. This can also happen in environments with strict module resolution if a CommonJS `require` is used where an ESM `import` is expected, or vice-versa.","error":"Module not found: Can't resolve 'rc-dialog'"}],"ecosystem":"npm"}