Code editor

Note: Code editor lives in its own package at @patternfly/react-code-editor and has required peer deps.

Examples

Basic

Dark theme

Line numbers

Read only

Minimap

With sizeToFit height, height will grow/shrink with content

These examples below are the shortcuts that we recommend describing in the popover since they are monaco features.

With actions

Drag and drop a file or upload one.

With custom control

Props

CodeEditorControl

Allows customizing the code editor controls by passing this sub-component into the code editor's customControl property.
*required
Name	Type	Default	Description
iconrequired	React.ReactNode		Icon rendered inside the code editor control.
aria-label	string		Accessible label for the code editor control
className	string		Additional classes added to the code editor control.
isVisible	boolean	true	Flag indicating that the button is visible above the code editor.
onClick	(code: string, event?: any) => void	() => {}	Event handler for the click of the button
tooltipProps	any	{}	Additional tooltip props forwarded to the Tooltip component

The main popover component. The following properties can also be passed into another component that has a property specifically for passing in popover properties.
*required
Name	Type	Default	Description
bodyContentrequired	React.ReactNode \| ((hide: () => void) => React.ReactNode)		Body content of the popover. If you want to close the popover after an action within the body content, you can use the isVisible prop for manual control, or you can provide a function which will receive a callback as an argument to hide the popover, i.e. bodyContent={hide => <Button onClick={() => hide()}>Close</Button>}
alertSeverityScreenReaderText	string		Text announced by screen reader when alert severity variant is set to indicate severity level.
alertSeverityVariant	'custom' \| 'info' \| 'warning' \| 'success' \| 'danger'		Severity variants for an alert popover. This modifies the color of the header to match the severity.
animationDuration	number	300	The duration of the CSS fade transition animation.
appendTo	HTMLElement \| ((ref?: HTMLElement) => HTMLElement) \| 'inline'	() => document.body	The element to append the popover to. Defaults to "inline".
aria-label	string	''	Accessible label for the popover, required when header is not present.
children	ReactElement<any>		The trigger reference element to which the popover is relatively placed to. If you cannot wrap the element with the Popover, you can use the triggerRef prop instead. Usage: <Popover><Button>Reference</Button></Popover>
className	string	''	Additional classes added to the popover.
closeBtnAriaLabel	string	'Close'	Accessible label for the close button.
distance	number	25	Distance of the popover to its target. Defaults to 25.
elementToFocus	HTMLElement \| SVGElement \| string		The element to focus when the popover becomes visible. By default the first focusable element will receive focus.
enableFlip	boolean	true	If true, tries to keep the popover in view by flipping it if necessary. If the position is set to 'auto', this prop is ignored.
flipBehavior	'flip' \| ( \| 'top' \| 'bottom' \| 'left' \| 'right' \| 'top-start' \| 'top-end' \| 'bottom-start' \| 'bottom-end' \| 'left-start' \| 'left-end' \| 'right-start' \| 'right-end' )[]	[ 'top', 'bottom', 'left', 'right', 'top-start', 'top-end', 'bottom-start', 'bottom-end', 'left-start', 'left-end', 'right-start', 'right-end' ]	The desired position to flip the popover to if the initial position is not possible. By setting this prop to 'flip' it attempts to flip the popover to the opposite side if there is no space. You can also pass an array of positions that determines the flip order. It should contain the initial position followed by alternative positions if that position is unavailable. Example: Initial position is 'top'. Button with popover is in the top right corner. 'flipBehavior' is set to ['top', 'right', 'left']. Since there is no space to the top, it checks if right is available. There's also no space to the right, so it finally shows the popover on the left.
footerContent	React.ReactNode \| ((hide: () => void) => React.ReactNode)	null	Footer content of the popover. If you want to close the popover after an action within the footer content, you can use the isVisible prop for manual control, or you can provide a function which will receive a callback as an argument to hide the popover, i.e. footerContent={hide => <Button onClick={() => hide()}>Close</Button>}
hasAutoWidth	boolean	false	Removes fixed-width and allows width to be defined by contents.
hasNoPadding	boolean	false	Allows content to touch edges of popover container.
headerComponent	'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6'	'h6'	Sets the heading level to use for the popover header. Defaults to h6.
headerContent	React.ReactNode \| ((hide: () => void) => React.ReactNode)	null	Simple header content to be placed within a title. If you want to close the popover after an action within the header content, you can use the isVisible prop for manual control, or you can provide a function which will receive a callback as an argument to hide the popover, i.e. headerContent={hide => <Button onClick={() => hide()}>Close</Button>}
headerIcon	React.ReactNode	null	Icon to be displayed in the popover header. *
hideOnOutsideClick	boolean	true	Hides the popover when a click occurs outside (only works if isVisible is not controlled by the user).
id	string		Id used as part of the various popover elements (popover-${id}-header/body/footer).
isVisible	boolean	null	True to show the popover programmatically. Used in conjunction with the shouldClose prop. By default, the popover child element handles click events automatically. If you want to control this programmatically, the popover will not auto-close if the close button is clicked, the escape key is used, or if a click occurs outside the popover. Instead, the consumer is responsible for closing the popover themselves by adding a callback listener for the shouldClose prop.
maxWidth	string	popoverMaxWidth && popoverMaxWidth.value	Maximum width of the popover (default 18.75rem).
minWidth	string	popoverMinWidth && popoverMinWidth.value	Minimum width of the popover (default 6.25rem).
onHidden	() => void	(): void => null	Lifecycle function invoked when the popover has fully transitioned out.
onHide	(event: MouseEvent \| KeyboardEvent) => void	(): void => null	Lifecycle function invoked when the popover begins to transition out.
onMount	() => void	(): void => null	Lifecycle function invoked when the popover has been mounted to the DOM.
onShow	(event: MouseEvent \| KeyboardEvent) => void	(): void => null	Lifecycle function invoked when the popover begins to transition in.
onShown	() => void	(): void => null	Lifecycle function invoked when the popover has fully transitioned in.
position	PopoverPosition \| 'auto' \| 'top' \| 'bottom' \| 'left' \| 'right' \| 'top-start' \| 'top-end' \| 'bottom-start' \| 'bottom-end' \| 'left-start' \| 'left-end' \| 'right-start' \| 'right-end'	'top'	Popover position. Note: With the enableFlip property set to true, it will change the position if there is not enough space for the starting position. The behavior of where it flips to can be controlled through the flipBehavior property.
shouldClose	(event: MouseEvent \| KeyboardEvent, hideFunction?: () => void) => void	(): void => null	Callback function that is only invoked when isVisible is also controlled. Called when the popover close button is clicked, the enter key was used on it, or the escape key is used.
shouldOpen	(event: MouseEvent \| KeyboardEvent, showFunction?: () => void) => void	(): void => null	Callback function that is only invoked when isVisible is also controlled. Called when the enter key is used on the focused trigger.
showClose	boolean	true	Flag indicating whether the close button should be shown.
triggerAction	'click' \| 'hover'	'click'	Sets an interaction to open popover, defaults to "click"
triggerRef	HTMLElement \| (() => HTMLElement) \| React.RefObject<any>		The trigger reference element to which the popover is relatively placed to. If you can wrap the element with the popover, you can use the children prop instead, or both props together. When passed along with the trigger prop, the div element that wraps the trigger will be removed. Usage: <Popover triggerRef={() => document.getElementById('reference-element')} />
withFocusTrap	boolean		Whether to trap focus in the popover.
zIndex	number	9999	The z-index of the popover.

CSS variables

	Selector	Variable	Value

View source on GitHub