@jmind.systems/react-modal

React-Modal

aphrodite is required for react-modal to work

Example

codesandbox

Docs

• addModal - takes a modal name. Use to open modal.
• removeModal - takes a modal name. Use to close modal.
• subscribeToModal: (name, callback: (isOpen)) - callback will be trigger on modal open/close
• name: string - The modal name should be unique
• children: ReactNode - modal content
• type: string: submit, confirm, custom
• onClose?: function
• onSubmit?: function - will be triggered when the user clicks on submit button
• settings?: object - use this parameter to pass custom settings:
  • rootStyles: object
  • overlayStyles: object
  • withCloseBtn: boolean (default true) - Using this prop you can show
    or hide close btn (cross.svg)
  • closeStyles: object
    • svg: object - Use to change close btn position, size, etc.
    • path: object - Use to change close button color
• controlsSettings?: object
  • cancel: object - cancel button settings.
    • text: string | React.Element - cancel button text
    • styles: object - styles for cancel button. Use this
      parameter to change default button styles.
  • submit: object - submit button settings
    • text: string | React.Element - submit button text
    • styles: object - styles for submit button. Use this
      parameter to change default button styles.
  • wrapper: object - There is a parant div around cancel and submit buttons. Use this parameter to change wrapper style (margin, background, etc.)
• closeIcon?: function This prop can be used to pass custom close component, for example text.
• portalId?:string (default - modal) - By default you should have root div with id="modal" ().