@wedgekit/modal v6.6.1
Modal
Purpose
Modal functions as an HTML dialog
. Use it as a parent to alerts, locators, or subwindows you wish to break the traditional page flow.
Basic Implementation
import Button from '@wedgekit/button';
import Modal from '@wedgekit/modal';
const Example = () => {
const [showModal, setShowModal] = React.useState(false);
return (
<div>
<Button
onClick={() => {
setShowModal(true);
}}
>
Open Modal
</Button>
{showModal && (
<Modal
label="My Modal"
onExit={() => {
setShowModal(false);
}}
>
<p style={{ padding: '24px', fontSize: '16px' }}>Here is some content.</p>
<Button
onClick={() => {
setShowModal(false);
}}
>
Exit Modal
</Button>
</Modal>
)}
</div>
);
};
render(<Example />);
Props
In addition to the props listed below, all react-focus-lock
props will be passed through.
className
Type: string
Required: ❌
This is exposed but is only here so that styled-components will be able to style components correctly. Please do not use this unless you really know what you are doing.
children
Type: JSX.element
Required: ✅
The modal content.
height
Type: string
Required: ❌
Allows the consumer to set a height value for the Modal, overriding the default height set by the position property.
label
Type: string
Required: ✅
Aria compliant text for all child components to be 'labeled-by', required on all wedgekit components.
mainContentLock
Type: boolean
Required: ❌
Default: true
Locking the main content prevents the user from interacting with the node tree outside of the modal. It also places a colored underlay to obscure the screen outside of the modal from vision. When mainContentLock is false
outside clicks and the escape button will not close the Modal.
position
Type: center
| top
| right
| bottom
| left
Required: ❌
Optional prop to designate the location of the Modal. Defaults to Center.
width
Type: string
Required: ❌
Allows the consumer to set a width value for the Modal, overriding the default width set by the position property.
onExit
Type: (event: ReactEvent) => void
Required: ✅
Function that will fire when the modal is closed. Events that will trigger onExit are as follows:
Pressing the escape key
Clicking outside of the Modal
Default Modal Components
@wedgekit/modal
offers default stylings for frequently used subcomponents of Modal
. ModalHeader and ModalFooter can be consumed like so:
import Button from '@wedgekit/button';
import Modal, { ModalHeader, ModalFooter } from '@wedgekit/modal';
const Example = () => {
const [showModal, setShowModal] = React.useState(false);
return (
<div>
<Button
onClick={() => {
setShowModal(true);
}}
>
Open Modal
</Button>
{showModal && (
<Modal
label="My Modal"
onExit={() => {
setShowModal(false);
}}
>
<ModalHeader
title="My Modal"
onClose={() => {
setShowModal(false);
}}
/>
<p style={{ padding: '24px', fontSize: '16px' }}>Here is some content.</p>
<ModalFooter
onPrimary={() => {
setShowModal(false);
}}
/>
</Modal>
)}
</div>
);
};
render(<Example />);
Alert Modal Component
@wedgekit/modal
offers the name export AlertModal that builds upon the modal component to display a standard alert type modal. The standard modal includes a confirm and cancel button, however the onConfirm
property can be omitted to provide a single button modal. The current alert modal types are information
, success
, warning
, danger
. A basic implementation of the AlertModal component:
import Button from '@wedgekit/button';
import { AlertModal } from '@wedgekit/modal';
const Example = () => {
const [showModal, setShowModal] = React.useState(false);
return (
<div>
<Button
onClick={() => {
setShowModal(true);
}}
>
Open Modal
</Button>
{showModal && (
<AlertModal
alertType='danger'
title='Delete record'
message='Are you sure you want to delete this record?'
buttonText = { continue: 'Delete' }
onContinue= {() => {
// delete the record
}}
onExit={() => {
setShowModal(false);
}}
/>
)}
</div>
);
};
render(<Example />);
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
12 months ago
11 months ago
12 months ago
11 months ago
11 months ago
1 year ago
11 months ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago