Modal

v.2.0.1

Installation

yarn

yarn add @mercell/modal-react

pnpm

pnpm add @mercell/modal-react

npm

npm install --save @mercell/modal-react

The Modal has necessary peerDependencies, please make sure that you have them in your project

"@carbon/icons-react": "^10.49.0",
"@mercell/tailwind": "^6.0.1",
"@mercell/use-media-query-react-hook": "^3.0.5",
"@mercell/use-on-outside-click-react-hook": "^3.0.1",
"classnames": "^2.3.1",
"react": "^17.0.2" 

Usage

To render Modal in your project you just simply import it

import {
    Modal,
    ModalTitle,
    ModalButtonsSection,
    ModalContent,
} from '@mercell/modal-react';

Live Editor

// You can play with code, with HTML tags and text as much as you want! const ModalExample = () => { const [isModalVisible, toggleModalVisibility] = React.useState(false) const openModal = () => toggleModalVisibility(true); const closeModal = () => toggleModalVisibility(false); return ( <div> <Button scheme="primary" className="ignore-outside-click" onClick={openModal}> Open Modal </Button> <Modal isModalVisible={isModalVisible} onCloseCallback={closeModal} // shouldCloseOnOutsideClick // ignoreOutsideClickClassName="ignore-outside-click" > <ModalTitle>Confirm cancellation</ModalTitle> <ModalContent> <p> By canceling you will loose the data you have entered for this new buyer. </p> <p>Are you sure you want to cancel?</p> </ModalContent> <ModalButtonsSection className="flex justify-end"> <Button scheme="secondary" className="mr-2" onClick={closeModal} > Cancel </Button> <Button scheme="primary">Confirm</Button> </ModalButtonsSection> </Modal> </div> )} render ( <ModalExample /> )

// You can play with code, with HTML tags and text as much as you want!
    const ModalExample = () => {
    const [isModalVisible, toggleModalVisibility] = React.useState(false)
    const openModal = () => toggleModalVisibility(true);
    const closeModal = () => toggleModalVisibility(false);
    return (
        <div>
            <Button scheme="primary" className="ignore-outside-click" onClick={openModal}>
                Open Modal
            </Button>
            <Modal
                isModalVisible={isModalVisible}
                onCloseCallback={closeModal}
                // shouldCloseOnOutsideClick
                // ignoreOutsideClickClassName="ignore-outside-click"
            >
                <ModalTitle>Confirm cancellation</ModalTitle>
                <ModalContent>
                    <p>
                        By canceling you will loose the data you have entered
                        for this new buyer.
                    </p>
                    <p>Are you sure you want to cancel?</p>
                </ModalContent>
                <ModalButtonsSection className="flex justify-end">
                    <Button
                        scheme="secondary"
                        className="mr-2"
                        onClick={closeModal}
                    >
                        Cancel
                    </Button>
                    <Button scheme="primary">Confirm</Button>
                </ModalButtonsSection>
            </Modal>
        </div>
    )}
    render (
        <ModalExample />
    )

Result

Types, definitions, etc.

Types

ModalProps

interface ModalProps {
  isModalVisible: boolean;
  onCloseCallback: () => void;
  shouldCloseOnOutsideClick?: boolean;
  parent?: HTMLElement;
  parentClassName?: string;
  closeCrossButtonAriaLabel?: string;
  ignoreOutsideClickClassName?: string;
} & JSX.IntrinsicElements['div']

Name	Type	Default	Required	Description
isModalVisible	boolean	-	yes	Toggle modal visibility based on value
onCloseCallback	function - () => void	-	yes	Callback function to change visibility of modal
shouldCloseOnOutsideClick	boolean	true	no	Bool responsible for checking if modal should be closed if user would click on outside of modal scope
parent	HTMLElement | undefined	document.body	no	HTML tag to mount portal of modal, by default will be document.body
parentClassName	string	-	no	ClassName which will be passed to the parent element
oncloseCrossButtonAriaLabelExpand	string	'Close'	no	Aria name for close button to support other languages
ignoreOutsideClickClassName	string	'ignore-outside-click'	no	Class name to prevent close onClick e.g. on button which should invoke the modal when the shouldCloseOnOutsideClick is set to true

ModalTitle

  ModalTitle has type JSX.IntrinsicElements['h2'].

ModalContent

ModalContent has type JSX.IntrinsicElements['div'].

ModalButtonsSection

  ModalButtonsSection has type JSX.IntrinsicElements['div'].

Changelog

Change Log - @mercell/modal-react

This log was last generated on Tue, 28 Feb 2023 14:07:58 GMT and should not be manually modified.

2.0.1

Tue, 28 Feb 2023 14:07:58 GMT

Patches

• allow to use custom className for parent

2.0.0

Fri, 11 Nov 2022 09:18:57 GMT

Breaking changes

• New styling approach - use only tailwind classes, add tailwind-merge library

1.0.0

Thu, 15 Sep 2022 06:07:41 GMT

Breaking changes

• Migration to Tailwind3, React 18 and ViteJS from webpack.

0.1.5

Tue, 12 Jul 2022 10:42:52 GMT

Patches

• Adjustment of component to use new version of outsideClickHook

0.1.4

Fri, 01 Jul 2022 10:11:21 GMT

Patches

• Fix z index styling

0.1.3

Thu, 30 Jun 2022 10:57:49 GMT

Patches

• Package.json refactor, add test suite, more tests soon

0.1.2

Fri, 03 Jun 2022 13:08:46 GMT

Patches

• Zindex adjustment

0.1.1

Wed, 25 May 2022 08:16:55 GMT

Patches

• Add overflow hidden to body when modal is visible

0.1.0

Fri, 08 Apr 2022 10:19:50 GMT

Minor changes

• Switch to reusable portal component with additional content and title components

0.0.4

Thu, 31 Mar 2022 08:00:07 GMT

Patches

• Update types of modal and portal

0.0.3

Wed, 30 Mar 2022 11:20:41 GMT

Patches

• Add helper components to render title, content, buttons. Adjust styling regarding figma

0.0.2

Mon, 28 Feb 2022 12:45:49 GMT

Patches

• New component

Figma

Sometimes it can take some time until Figma will render component inside embed iframe. Try to click plus icon to 'reset' initial loader. (Works only in Chrome)

Click me to open figma in the new card