@rc-component/dialog

_{Part of the Ant Design ecosystem.}

💬 A composable dialog component for React.

English | 简体中文

Highlights

• Supports controlled visibility, mask, keyboard close, and focus restoration.
• Allows custom title, footer, close icon, container, motion, and modal content rendering.
• Provides semantic classNames and styles hooks for the dialog structure.
• Ships compiled JavaScript, TypeScript definitions, and CSS assets.

Install

npm install @rc-component/dialog

Usage

import Dialog from '@rc-component/dialog';
import '@rc-component/dialog/assets/index.css';

export default function App() {
  return (
    <Dialog title="Dialog" visible onClose={() => {}}>
      <p>Dialog content</p>
    </Dialog>
  );
}

Examples

Run the local dumi site:

npm install
npm start

Then open http://localhost:8000.

API

Property	Description	Type	Default
afterClose	Callback after close animation ends	() => void	-
animation	Dialog animation name	string	-
className	Additional dialog class name	string	-
classNames	Semantic class names	{ header?: string; body?: string; footer?: string; mask?: string; content?: string; wrapper?: string }	-
closable	Whether to show close button, or close button props	boolean | object	true
closeIcon	Custom close icon	React.ReactNode	-
destroyOnHidden	Unmount children after dialog closes	boolean	false
focusTriggerAfterClose	Focus trigger element after close	boolean	true
footer	Dialog footer	React.ReactNode	-
forceRender	Render dialog before it is first shown	boolean	false
getContainer	Container where dialog is mounted	() => HTMLElement	-
keyboard	Whether pressing Esc closes the dialog	boolean	true
mask	Whether to show mask	boolean	true
maskAnimation	Mask animation name	string	-
maskClosable	Whether clicking mask closes the dialog	boolean	true
maskTransitionName	Mask transition class name	string	-
modalRender	Custom modal content renderer	(node: React.ReactNode) => React.ReactNode	-
mousePosition	Mouse position used for transform origin	{ x: number; y: number }	-
prefixCls	Component class name prefix	string	rc-dialog
scrollLock	Whether to lock body scroll when open	boolean	true
style	Root dialog style	React.CSSProperties	-
styles	Semantic styles	{ header?: React.CSSProperties; body?: React.CSSProperties; footer?: React.CSSProperties; mask?: React.CSSProperties; content?: React.CSSProperties; wrapper?: React.CSSProperties }	-
title	Dialog title	React.ReactNode	-
transitionName	Dialog transition class name	string	-
visible	Whether the dialog is visible	boolean	false
zIndex	Dialog z-index	number	-
onClose	Callback when close button or mask is clicked	(event: React.SyntheticEvent) => void	-

Development

npm install
npm start

The dumi site runs at http://localhost:8000 by default.

npm test
npm run tsc
npm run lint
npm run compile
npm run build

Release

npm run prepublishOnly

The release flow is handled by @rc-component/np through the rc-np command after the package build.

License

@rc-component/dialog is released under the MIT license.