modal

v0.88.2arrow_drop_down
v0.88.2
v0.86.0
v0.85.0
v0.84.0
STATUS
Passing
DOWNLOADS
1,212
LICENSE
MIT
VISIBILITY
Public
PUBLISHED
3 years ago
SIZE
87 KB
Action onClick handler when using shorthand `actions`.
1 contributor
Install modal as a package?
Copied
npm i @bit/semantic-org.semantic-ui-react.modal
Set Bit as a scoped registryLearn more
npm config set '@bit:registry' https://node.bit.cloud
Component Example
React
React
Vue
Angular
React Native
Add dependency... help_outline
Just
import
any of the 1 million components
and packages in Bit or NPM to the example.
import Button from '@bit/grommet.grommet.button';
import Lodash from 'lodash';
toggle layout
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
chevron_left
chevron_right

Action onClick handler when using shorthand actions.

Called when a close event happens.

Called when the portal is mounted on the DOM.

Called when an open event happens.

Called when the portal is unmounted from the DOM.

Modal ()

A modal displays content that temporarily blocks interactions with the main view of a site.

onClick handler for an action. Mutually exclusive with children.

ModalActions ()

A modal can contain a row of actions.

ModalContent ()

A modal can contain content.

ModalDescription ()

A modal can contain a description with one or more paragraphs.

ModalHeader ()

A modal can have a header.

Ensures that modal can fit viewport without scroll.

Creates legacy styles for IE11.

Properties
NameTypeDefault valueDescription
as
elementType

An element type to render as (string or function).

actions
custom

Shorthand for Modal.Actions. Typically an array of button shorthand.

basic
bool

A modal can reduce its complexity

centered
booltrue

A modal can be vertically centered in the viewport

children
node

Primary content.

className
string

Additional classes.

closeIcon
node | object | bool

Shorthand for the close icon. Closes the modal on click.

closeOnDimmerClick
booltrue

Whether or not the Modal should close when the dimmer is clicked.

closeOnDocumentClick
boolfalse

Whether or not the Modal should close when the document is clicked.

content
custom

Simple text content for the Modal.

defaultOpen
bool

Initial value of open.

dimmer
true | 'inverted' | 'blurring'true

A Modal can appear in a dimmer.

eventPool
string'Modal'

Event pool namespace that is used to handle component events

header
custom

Modal displayed above the content in bold.

mountNode
any

The node where the modal should mount. Defaults to document.body.

onActionClick
function

React’s original SyntheticEvent.

onClose
function

React’s original SyntheticEvent.

onMount
function
onOpen
function

React’s original SyntheticEvent.

onUnmount
function
open
bool

Controls whether or not the Modal is displayed.

size
'mini' | 'tiny' | 'small' | 'large' | 'fullscreen'

A modal can vary in size

style
object

Custom styles.

trigger
node

Element to be rendered in-place where the portal is defined.

as
elementType

An element type to render as (string or function).

actions
custom

Array of shorthand buttons.

children
node

Primary content.

className
string

Additional classes.

content
custom

Shorthand for primary content.

onActionClick
custom

React’s original SyntheticEvent.

as
elementType

An element type to render as (string or function).

children
node

Primary content.

className
string

Additional classes.

content
custom

Shorthand for primary content.

image
bool

A modal can contain image content.

scrolling
bool

A modal can use the entire size of the screen.

as
elementType

An element type to render as (string or function).

children
node

Primary content.

className
string

Additional classes.

content
custom

Shorthand for primary content.

as
elementType

An element type to render as (string or function).

children
node

Primary content.

className
string

Additional classes.

content
custom

Shorthand for primary content.

Help and resources