@hixme-ui/modal

hixme-ui Modal component

Stats

StarsIssuesVersionUpdatedCreatedSize
@hixme-ui/modal
2.0.0-alpha.124 months ago4 years agoMinified + gzip package size for @hixme-ui/modal in KB

Readme

Modal

npm i --save @hixme-ui/modal

View it live

Usage

import Modal from '@hixme-ui/modal'

<Modal
  dialog 
  medium
  title='All your base are belong to us' 
  confirmLabel='Get down!' 
  cancelLabel='Eh, maybe not...'
>
  {/* Modal content here */}
</Modal>

Props

Property Type Value Required Description
backgroundColor string N/A Yes Easy way to change the modal color
hideCloseButton boolean false Yes Hide the default close button
style object N/A No Override modal styles
title string N/A No Modal title header
zIndex number 1001 No Modal z-index value
small boolean false No Modal with 568px max-width
medium boolean false No Modal with 800px max-width
large boolean false No Modal with 1024px max-width
middle boolean false No Vertically align content in the center of the modal
bottom boolean false No Vertically align content on the bottom of the modal
contentCenter boolean false No Horizontally align content center
contentEnd boolean false No Horizontally align content right
contentPadding string null No Padding for the modal content
cancelProcessing boolean false No Show processing state on cancel button
cancelSubmittingText string N/A No Text shown on the cancel button when cancelProcessing is true
cancelHandler function defaultClose() No When dialog = true, function called on cancel
cancelLabel string 'Cancel' No When dialog = true, label on the cancel button
confirmProcessing boolean false No Show processing state on confirm button
confirmSubmittingText string N/A No Text shown on the confirm button when confirmProcessing is true
confirmHandler function N/A No When dialog = true, function called on confirm
confirmLabel string 'Ok' No When dialog = true, label on the confirm button
dialog boolean false No Show dialog modal
errorDialog boolean false No Show error dialog modal

Styling

The default style is a full screen modal. You can specify small, medium, or large to render a more traditional modal style. Any of the preset modal styles can be overwritten by providing the <MrModal /> component with a style object.

style: {
  content: {
    ...contentStyles
  },
  overlay: {
    ...overlayStyles
  },
}

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.