{"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.","language":"javascript","status":"deprecated","last_verified":"Sun Apr 19","install":{"commands":["npm install rc-dialog"],"cli":null},"imports":["import Dialog from 'rc-dialog';","import type { IDialogPropTypes } from 'rc-dialog';","import type { DialogWrap } from 'rc-dialog';"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}