STEP 1: creation of modal component.

To create the modal we need two components:

SimpleModal.js , the modal itself, with its stylesheet JSS file SimpleModalStyles.js SimpleModalLauncher.js : the parent component that displays the opener button or link, and manage the visibility of the modal with its own state .

SimpleModal.js: the rendered markup.

The html (JSX) markup is really simple, basically 3 elements: the main wrapper .modalOverlay contains the modal window .modalContent and the close button .closeButton . The modal window accepts {children} as prop, so we can assign to this component every kind of content.

Here a simulation of the modal with an image as child. You can easily change the appearance with some line of JSS (CSS).

SimpleModal.js: the close action.

As clarified at the beginning, this component wont manage it’s visibility, this means that by itself it will be always visible. We’ll manage its visibility from its parent component SimpleModalLauncher.js .

However this component contains some elements that if clicked, they are being able to close it. How is it possible to invoke the close action from within the component, if this action is declared outside the component? The answer is really simple, we will pass this action from outside as functional prop. The name of this prop will be onCloseRequest .

So, we need to invoke onCloseRequest function in these three events:

clicking on the close button; pressing ESC key; clicking outside the modal window.

1. I need to close the modal clicking on close button