React Modal example
Male avatar

loveprogramming viết ngày 20/05/2021

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:

npm install react-modal
yarn add react-modal

Or add dependency in package.json:

  "name": "add-modal",
  "version": "1.0.0",
  "main": "index.js",
  "author": "JavaSampleApproach",
  "scripts": {
  "dependencies": {
    "react-modal": "3.3.2",

Then run cmd yarn install.

Create React Modal Component

import React from 'react';
import Modal from 'react-modal';

const modalStyles = {
    content: {
        top: '50%',
        left: '50%',
        right: 'auto',
        bottom: 'auto',
        marginRight: '-50%',
        transform: 'translate(-50%, -50%)'

const NoteModal = (props) => (
        contentLabel='Selected Note'
        <h4>Selected Note</h4>
        <button onClick={props.closeNoteModal}>OK</button>

export default NoteModal;
  • 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

More at:

React Modal example

Bình luận

{{ }}
Bỏ hay Hay
Male avatar
{{ comment_error }}

Hiển thị thử

Chỉnh sửa

Male avatar


545 bài viết.
97 người follow
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
Male avatar
1 0
Tutorial Link: (Link) (Ảnh) Django is a Pythonbased free and opensource web framework that follows the modeltemplateview architectural pattern. A...
loveprogramming viết 9 tháng trước
1 0
Male avatar
1 0 Angular 11 Node.js PostgreSQL Crud Example (Ảnh) Tutorial: “Angular 11 Node.js Postg...
loveprogramming viết 7 tháng trước
1 0
Male avatar
1 0
Angular Spring Boot jwt Authentication Example Github (Ảnh) Tutorial: ” Angular Spring Boot jwt Authe...
loveprogramming viết 7 tháng trước
1 0
Bài viết liên quan
0 0
Mình khá là lười, nên mình sẽ không đưa định nghĩa hay usage của reflection vào đây. Vì dù sao mình cũng sẽ chỉ copy thôi :smile:. Vậy nên chúng ta...
Rice viết gần 3 năm trước
0 0


{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}

Male avatar
{{userFollowed ? 'Following' : 'Follow'}}
545 bài viết.
97 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!