Modals View Source



The Modal component is used to get a user's focus and require an action.



Imports



Import React and the Modal Component, as well as the dispatchCustomEvent function.

0
import * as React from "react";
1
import { GlobalModal, dispatchCustomEvent } from "slate-react-system";



Usage



Declare the component at the root level of your document (e.g. in index.js or App.js) so it is accessible throughout and will not get buried in the DOM tree.

Optionally, use backgroundStyle to style the background and style to style the modal itself.

0
class App extends React.Component {
1
  render() {
2
    return (
3
      <React.Fragment>
4
        <GlobalModal style={{ padding: "40px 16px" }} />
5
        {this.props.children}
6
      </React.Fragment>
7
    );
8
  }
9
}



Modal




While the Modal component is always present, a modal will only appear once you trigger it by creating a custom event with the title "create-modal". It can be removed with a custom event entitled "delete-modal".

0
class ExampleOne extends React.Component {
1
  _handleCreate = (detail) => {
2
    dispatchCustomEvent({ name: "create-modal", detail: detail });
3
  };
4
5
  _handleDelete = () => {
6
    dispatchCustomEvent({ name: "delete-modal", detail: {} });
7
  };
8
9
  render() {
10
    let modalContent = (
11
      <div
12
        style={{
13
          display: "flex",
14
          flexDirection: "column",
15
          alignItems: "center",
16
          justifyContent: "center",
17
          textAlign: "center",
18
        }}
19
      >
20
        <H2>Render whatever component you like here</H2>
21
        <br />
22
        <ButtonSecondary onClick={this._handleDelete}>Cancel</ButtonSecondary>
23
      </div>
24
    );
25
    return (
26
      <ButtonSecondary
27
        full
28
        onClick={() => this._handleCreate({ modal: modalContent })}
29
      >
30
        Click for modal popup
31
      </ButtonSecondary>
32
    );
33
  }
34
}



Accepted React Properties



Notifications
NameTypeDefaultDescription
style
Object
{}
Style object used to style the modal (height and width, positioning, padding etc.)
backgroundStyle
Object
{}
Style object used to style the modal background (color, etc.)



Accepted Create Modal Properties



Note that these properties are passed through a custom event rather than as react properties.

Notifications
NameTypeDefaultDescription
modal
Component
null
Component to be rendered inside the modal
ExperiencesCreateFilecoinAddressCreateFilecoinStorageDealCreateTokenFilecoinBalancesListFilecoinDealsListFilecoinSettingsFriendsListPeersListSendAddressFilecoin

Components
Avatar GroupButtonsCard TabsCarouselCheckboxesColorsDatepickerDropdownsGlobeHover TileIconsInputsLine ChartList EditorLoadersModalsNotificationsRadiosSlidersStatsTablesTabsTogglesTooltipsTypography
View source