Modal

Display modal window.

  • The Modal is displayed at the center of the screen and adds an overlay on the rest of it.
  • The Modal component consists of an overlay, a dialog and an optional close button.
  • Modals contain text or form with controls.
  • You can close Modal by pressing esc key on keyboard.

Install

import {Modal, ModalAlert} from '@xsolla/uikit';

Deps: https://github.com/MichalZalecki/react-portal-universal

Examples

Regular form
Alert
Confirm
Confirm with checkbox
Confirm with input

Usage

<Modal isOpen={this.state.isOpen}>
  <Fragment>
    <Head>Title</Head>
    <FormFooter>
      <Button onClick={() => this.setState({isOpen: false})}>Close</Button>
    </FormFooter>
  </Fragment>
</Modal>

ModalAlert

<ModalAlert
  isOpen={this.state.isOpen}
  icon={require(':path')}
  fetching={true}
  title="Success alert"
  description="The keys you requested are successfully sent. Please check email."
  discard="Thanks, dismiss"
/>

ModalAlert with confirmation button

<ModalAlert
  isOpen={this.state.isOpen}
  icon={require(':path')}
  title="Delete keys"
  description="This action cannot be undone. Are you sure you want to delete all keys?"
  discard="Nevermind"
  submit="Yes, delete keys"
/>

ModalAlert with confirmation button and checkbox

<ModalAlert
  isOpen={this.state.isOpen}
  icon={require(':path')}
  title="Data may be lost"
  description="If you change your secret key or Webhook URL. Do you want to proceed?"
  discard="Discard"
  submit="Proceed"
  submitAppearance="alert"
  confirmationEl={({status, handler}) => (
    <Checkbox
      input={{
        onChange: handler,
        value: status
      }}
      label="Yes, I understand effect"
    />
  )}
/>

API

PropertyDescriptionTypeDefault
childrenchildren of modalReactNode
isOpenModal only render its content when trueboolfalse
fetchingset the fetching status of modalboolfalse
sizecan be set to sm, md, lg, xlgstringmd
icon (only ModalAlert)icon on top of the modalstringnull
discard (only ModalAlert)discard button textReactNodenull
confirmationEl (only ModalAlert)confirmation elementfunc``
confirmationHandler (only ModalAlert)confirmation handlerfunc``
submit (only ModalAlert)submit button text if string or submit element if componentstring or React.ComponentTypenull
description (only ModalAlert)description textReactNodenull
closeAfterSubmit (only ModalAlert)close modal after onSubmitbooltrue
submitByEnter (only ModalAlert)submit modal by enterboolfalse
compactFooter (only ModalAlert)footer with small margin-topboolfalse
onCloseclose handlerfunc() => void 0
onSubmit (only ModalAlert)submit handlerfunc() => void 0
hideCloseBtn (only Modal)hide close buttonboolfalse
modalClassName (only Modal)additional class for modalstring``