pcln-modal

pcln-modal

React modal component

npm i pcln-modal

import Modal from 'pcln-modal'

Modal Component

import { Modal } from 'pcln-modal'
;<Modal
  ariaLabel='This is an example Modal' //sets the aria-label of the DialogContent
  isOpen={true} //boolean for control this status of modal
  onClose={someFunc} //func function for handle close the modal while click on the overlay
  bg='white' //modal background color
  zIndex={5} //zIndex
  imgMode={false} //default false, will add padding to the modal, if true, then there will be no padding
  width={['100px', '200px']} //responsive width the modal
  header={<SomeHeaderComponent />} //Component for header, could import predefined ones too
  disableCloseButton={true} //there will be a floating close button, when enabledOverflow = true, it's there by default
  enableOverflow={false} //when enabled, the modal will extend over the screen based on content, otherwise it will follow height
  height={['100px', '200px']} //responsive height, when enableOverflow={true}, it's not in use
  verticalAlignment='middle' // Aligns dialog body vertically - options = ['middle', 'top', 'bottom']
  overlayAnimation={null} // Accepts a function which overwrites default animation
  dialogAnimation={null} // Accepts a function which overwrites default animation
  timeout={500} // Accepts a number which overwrites the default delay for the open animation to begin, default is 500ms
>
  <SomeChildComponent />
</Modal>

Note: <Modal> relies on values from theme, so it must be a descendent of <ThemeProvider> in order to work properly. Otherwise, you might experience errors like this:

Uncaught TypeError: Cannot read property '3' of undefined

ScrollLock helper

This helper class will prevent background scroll when modal is open. However, there can be only one instance of this helper is working in a page since it messes with body style

import { ScrollLock } from 'pcln-modal'

class SomeWrapper extends React.component {
  constructor(props) {
    super(props)
    this.scrollLock = new ScrollLock()
  }

  openModalFunc() {
    this.scrollLock.on()
    this.setState({
      modalOpen: true,
    })
  }

  closeModalFunc() {
    this.scrollLock.off()
    this.setState({
      modalOpen: false,
    })
  }
}

Overwriting Animations

For its animations, this Modal currently uses react-transition-group. This means that the following hooks are exposed during the animation life cycle: [ entering, entered, exiting, exited]

We can then use these states to write custom animations, like so:

const MY_ANIMATION = (transitionState) => `
  transform: scale(0.5);
  transition: transform .5s cubic-bezier(0.50, 0.00, 0.25, 1.00);
  ${transitionState === 'entering' ? `transform: scale(0.5);` : ''}
  ${transitionState === 'entered' ? `transform: scale(1);` : ''}
  ${transitionState === 'exiting' ? `transform: scale(0.5);` : ''}
  ${transitionState === 'exited' ? `transform: scale(0.5);` : ''}
`