Switch branches/tags
@wordpress/wordcount@2.0.2 @wordpress/wordcount@2.0.1 @wordpress/wordcount@2.0.0 @wordpress/wordcount@1.1.3 @wordpress/wordcount@1.1.2 @wordpress/wordcount@1.1.1 @wordpress/wordcount@1.1.0 @wordpress/viewport@2.0.3 @wordpress/viewport@2.0.2 @wordpress/viewport@2.0.1 @wordpress/viewport@2.0.0 @wordpress/viewport@1.0.4 @wordpress/viewport@1.0.3 @wordpress/viewport@1.0.2 @wordpress/viewport@1.0.1 @wordpress/viewport@1.0.0 @wordpress/url@2.1.0 @wordpress/url@2.0.2 @wordpress/url@2.0.1 @wordpress/url@2.0.0 @wordpress/url@1.2.3 @wordpress/url@1.2.2 @wordpress/url@1.2.1 @wordpress/url@1.2.0 @wordpress/token-list@1.0.2 @wordpress/token-list@1.0.1 @wordpress/token-list@1.0.0 @wordpress/shortcode@2.0.2 @wordpress/shortcode@2.0.1 @wordpress/shortcode@2.0.0 @wordpress/shortcode@1.0.3 @wordpress/shortcode@1.0.2 @wordpress/shortcode@1.0.1 @wordpress/shortcode@1.0.0 @wordpress/shortcode@1.0.0-alpha.3 @wordpress/shortcode@1.0.0-alpha.2 @wordpress/scripts@2.4.0 @wordpress/scripts@2.3.1 @wordpress/scripts@2.3.0 @wordpress/scripts@2.2.1 @wordpress/scripts@2.2.0 @wordpress/scripts@2.1.0 @wordpress/scripts@2.0.3 @wordpress/scripts@2.0.2 @wordpress/scripts@2.0.1 @wordpress/scripts@2.0.0 @wordpress/rich-text@1.0.0-beta.2 @wordpress/rich-text@1.0.0-beta.1 @wordpress/redux-routine@3.0.1 @wordpress/redux-routine@3.0.0 @wordpress/redux-routine@2.0.0 @wordpress/redux-routine@1.0.0 @wordpress/postcss-themes@1.0.4 @wordpress/postcss-themes@1.0.3 @wordpress/postcss-themes@1.0.2 @wordpress/postcss-themes@1.0.1 @wordpress/postcss-themes@1.0.0 @wordpress/postcss-themes@1.0.0-alpha.3 @wordpress/postcss-themes@1.0.0-alpha.2 @wordpress/postcss-themes@1.0.0-alpha.1 @wordpress/postcss-themes@1.0.0-alpha.0 @wordpress/plugins@2.0.3 @wordpress/plugins@2.0.2 @wordpress/plugins@2.0.1 @wordpress/plugins@2.0.0 @wordpress/plugins@1.0.4 @wordpress/plugins@1.0.3 @wordpress/plugins@1.0.2 @wordpress/plugins@1.0.1 @wordpress/plugins@1.0.0 @wordpress/plugins@1.0.0-alpha.3 @wordpress/plugins@1.0.0-alpha.2 @wordpress/nux@2.0.3 @wordpress/nux@2.0.2 @wordpress/nux@2.0.1 @wordpress/nux@2.0.0 @wordpress/nux@1.1.1 @wordpress/nux@1.1.0 @wordpress/nux@1.0.2 @wordpress/nux@1.0.1 @wordpress/nux@1.0.0 @wordpress/npm-package-json-lint-config@1.1.5 @wordpress/npm-package-json-lint-config@1.1.4 @wordpress/npm-package-json-lint-config@1.1.3 @wordpress/npm-package-json-lint-config@1.1.2 @wordpress/npm-package-json-lint-config@1.1.1 @wordpress/npm-package-json-lint-config@1.1.0 @wordpress/list-reusable-blocks@1.1.1 @wordpress/list-reusable-blocks@1.1.0 @wordpress/list-reusable-blocks@1.0.1 @wordpress/library-export-default-webpack-plugin@1.0.4 @wordpress/library-export-default-webpack-plugin@1.0.3 @wordpress/library-export-default-webpack-plugin@1.0.2 @wordpress/library-export-default-webpack-plugin@1.0.1 @wordpress/library-export-default-webpack-plugin@1.0.0 @wordpress/library-export-default-webpack-plugin@1.0.0-alpha.3 @wordpress/library-export-default-webpack-plugin@1.0.0-alpha.2 @wordpress/library-export-default-webpack-plugin@1.0.0-alpha.1 @wordpress/library-export-default-webpack-plugin@1.0.0-alpha.0 @wordpress/keycodes@2.0.2
Nothing to show
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
..
Failed to load latest commit information.
test
README.md
aria-helper.js
frame.js
header.js
index.js
style.scss

README.md

Modal

The modal is used to create an accessible modal over an application.

Note: The API for this modal has been mimicked to resemble react-modal.

Usage

The following example shows you how to properly implement a modal. For the modal to properly work it's important you implement the close logic for the modal properly.

import { Button, Modal } from '@wordpress/components';
import { withState } from '@wordpress/compose';

const MyModal = withState( {
	isOpen: false,
} )( ( { isOpen, setState } ) => (
	<div>
		<Button isDefault onClick={ () => setState( { isOpen: true } ) }>Open Modal</Button>
		{ isOpen ?
			<Modal
				title="This is my modal"
				onRequestClose={ () => setState( { isOpen: false } ) }>
				<Button isDefault onClick={ () => setState( { isOpen: false } ) }>
					My custom close button
				</Button>
			</Modal>
			: null }
	</div>
) );

Props

The set of props accepted by the component will be specified below. Props not included in this set will be applied to the input elements.

title

This property is used as the modal header's title. It is required for accessibility reasons.

  • Type: String
  • Required: Yes

onRequestClose

This function is called to indicate that the modal should be closed.

  • Type: function
  • Required: Yes

contentLabel

If this property is added, it will be added to the modal content div as aria-label. You are encouraged to use this if aria.labelledby is not provided.

  • Type: String
  • Required: No

aria.labelledby

If this property is added, it will be added to the modal content div as aria-labelledby. You are encouraged to use this when the modal is visually labelled.

  • Type: String
  • Required: No
  • Default: modal-heading

aria.describedby

If this property is added, it will be added to the modal content div as aria-describedby.

  • Type: String
  • Required: No

focusOnMount

If this property is true, it will focus the first tabbable element rendered in the modal.

  • Type: boolean
  • Required: No
  • Default: true

shouldCloseOnEsc

If this property is added, it will determine whether the modal requests to close when the escape key is pressed.

  • Type: boolean
  • Required: No
  • Default: true

shouldCloseOnClickOutside

If this property is added, it will determine whether the modal requests to close when a mouse click occurs outside of the modal content.

  • Type: boolean
  • Required: No
  • Default: true

isDismissable

If this property is set to false, the modal will not display a close icon and cannot be dismissed.

  • Type: boolean
  • Required: No
  • Default: true

className

If this property is added, it will an additional class name to the modal content div.

  • Type: String
  • Required: No

role

If this property is added, it will override the default role of the modal.

  • Type: String
  • Required: No
  • Default: dialog

overlayClassName

If this property is added, it will an additional class name to the modal overlay div.

  • Type: String
  • Required: No