React Modal example

In this tutorial, we’re gonna add a React Modal to Note Application. It appears every time we click on a Note item.

Related post: Build & run React Application with Webpack – React Webpack example

More practice: Style React Application – apply SCSS/CSS files to React with Webpack


When clicking on any Note item, a new Box that displays item content is opened. We can close by OK button, by clicking on outside area, or by pressing ESC key.


How to
Install React Modal

We can use npm or yarn:

Or add dependency in package.json:

Then run cmd yarn install.

Create React Modal Component

isOpen indicates that the modal should be shown (true) or not (false).
onRequestClose: function runs when the modal is requested to be closed (clicking on overlay or pressing ESC).
style: styles to be used.
ariaHideApp: describes if the appElement should be hidden (true) or not (false).

Add React Modal to parent Component

We will pass appClearSelectedNote() function to NoteModal Component as a props named closeNoteModal.

isOpen is checked by selectedNote state.
This state is controller by appSelectNote() which is passed from NoteApp to Notes then to Note Component as showNoteModal:

Source code


For running:
yarn install
yarn run dev-server or yarn run build, then yarn run serve.

By grokonez | April 7, 2018.

Related Posts

Got Something To Say:

Your email address will not be published. Required fields are marked *