@comparaonline/ui-modal

Styled version of React Modal

Usage no npm install needed!

<script type="module">
  import comparaonlineUiModal from 'https://cdn.skypack.dev/@comparaonline/ui-modal';
</script>

README

@comparaonline/ui-modal

Styled version of React Modal

Installation

It has a react-modal as peer dependency.

yarn add react-modal @comparaonline/ui-modal

Usage

import Modal from '@comparaonline/ui-modal';

props => <Modal {...props} />;

Proptypes

Name Type Default Description
renderTitle func () => {} Function that renders a component to be used as the modal title
renderDismissAction func () => {} Function that renders a component to be used as the dismiss (close) action
renderConfirmAction func () => {} Function that renders a component to be used as the affirmative action

For more information about the props see the React Modal usage summary.

Avoid the body scroll

If you need to block the scroll of the background content, add this classes to your global CSS. You may need to change the class names if you set a different bodyOpenClassName or htmlOpenClassName values in the Modal component.

.ReactModal__Body--open,
.ReactModal__Html--open {
  overflow: hidden;
}