modal

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`.

Informational Components

Modal

React

UI Components

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

Vue

Angular

React Native

Add dependency...

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';

modifieddraft

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

Name	Type	Default value	Description
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	`bool`	`true`	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	`bool`	`true`	Whether or not the Modal should close when the dimmer is clicked.
closeOnDocumentClick	`bool`	`false`	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.