Modal

caution

All props/parameters are optional unless they are marked with an asterisk ( * ).

caution

This component requires the use of the common module modal.

Example

import { common, components } from "replugged";
const { modal } = common;
const { Modal } = components;

modal.openModal((props) => (
  <Modal.ModalRoot {...props}>
    <Modal.ModalHeader>{/* Your components for the header here */}</Modal.ModalHeader>
    <Modal.ModalContent>{/* Your components here */}</Modal.ModalContent>
    <Modal.ModalFooter>{/* Your components for the footer here */}</Modal.ModalFooter>
  </Modal.ModalRoot>
));

Subcomponents

Component	Description
Modal.ModalCloseButton	Close button component
Modal.ModalContent	Contains the content
Modal.ModalFooter	Contains the footer
Modal.ModalHeader	Contains the header
Modal.ModalRoot	Modal root component

Types

Modal.ModalCloseButton

Props:

Name	Type	Default	Description
className	string		Component class name
focusProps	Record<string, unknown>		Props for the FocusRing component
hideOnFullscreen	boolean	false	Whether the button is hidden when modal is in fullscreen
onClick	* (): void		Function ran when clicking the close button
withCircleBackground	boolean	false	Whether the button is in a circle

Modal.ModalContent

Props:

info

The props of this component extend the attributes of the div element.

Name	Type	Default	Description
scrollbarType	"auto" | "none" | "thin"	thin	Scrollbar type
scrollerRef	Ref<unknown>		Scroller ref

Modal.ModalFooter

Props:

Name	Type	Default	Description
align	Flex.Align	Flex.Align.STRETCH	Flexbox align
className	string		Component class name
direction	Flex.Direction	Flex.Direction.HORIZONTAL_REVERSE	Flexbox direction
justify	Flex.Justify	Flex.Justify.START	Flexbox justify
wrap	Flex.Wrap	Flex.Wrap.NO_WRAP	Flexbox wrap

Modal.ModalHeader

Props:

Name	Type	Default	Description
align	Flex.Align	Flex.Align.CENTER	Flexbox align
className	string		Component class name
direction	Flex.Direction	Flex.Direction.HORIZONTAL	Flexbox direction
justify	Flex.Justify	Flex.Justify.START	Flexbox justify
separator	boolean	false	Whether a divider is shown between the header and the modal content
wrap	Flex.Wrap	Flex.Wrap.NO_WRAP	Flexbox wrap

Modal.ModalRoot

Props:

info

The props of this component extend the attributes of the div element.

Name	Type	Default	Description
className	string		Component class name
fullscreenOnMobile	boolean	true	Whether the modal is in fullscreen if app is in mobile view
hideShadow	boolean	false	Whether the shadow is hidden
onAnimationEnd	(): string		Function ran when the modal stopped animating
returnRef	Ref<unknown>		Returned ref
role	string	dialog	Modal element role
size	string	small	Modal size
transitionState	string		Modal state