Modal

Modal component is an overlay for React Modal. You can pass any of the given props through Slipstream UI and can also make use of any available props React Modal provides.

Implementation

import { Modal } from "slipstream-ui";

const Example = () => <Modal />;

Default

<Modal isOpen={isOpen} toggle={_toggle}>

<Modal.Header title="Modal Title" />

<Modal.Body>...</Modal.Body>

<Modal.Footer className="justify-end">

<Modal.Button type="button" className="mr-2" color="link" close>

Cancel

</Modal.Button>

<Modal.Button type="button" onClick={_handleSave}>

Create

</Modal.Button>

</Modal.Footer>

</Modal>

Size

<Modal size="4xl">....</Modal>

Bordered

<Modal bordered>....</Modal>

Static Backdrop

Disable click on backdrop to close the modal.

<Modal bordered>....</Modal>

Right-To-Left (rtl)

<Modal rtl>....</Modal>

Props

Attribute	Type	Value	Default Value	Description
bodyClassName	string			Class names for div surrounding the Modal.Body component
bordered	boolean	true/false		Added border to Modal.Header and Modal.Footer
className	string			Add class names directly to ReactModal
contentLabel	string			Add contentLabel directly to ReactModal
duration	number	100/200/300/400/500/ 600/700/800/900/1000	500	Opacity transition when opening and closing the modal
isOpen	boolean	true/false		Dictates if Modal is visible
isStatic	boolean	true/false		Disabled click event on modal backdrop
onOpened	function			After modal has opened and mounted, this function is invoked
overlayClassName	string			Add class names to modal backdrop
rtl	boolean	true/false		Change content direction to right to left
size	string	xs/sm/md/lg/xl/ 2xl/3xl/4xl/5xl/full	xl	Change modal width size
style	object			Add styles to ReactModal
toggle	function			Toggle opened Modal component