Breaking News: Grepper is joining You.com. Read the official announcement!

Modal Dialogs in React

Add Answer

akileus answered on January 31, 2022 Popularity 10/10 Helpfulness 3/10

answer Modal Dialogs in React

related modal in react

related React Modal using Dialog

Modal Dialogs in React

Comment

import React from 'react';

class Modal extends React.Component {
  render() {
    // Render nothing if the "show" prop is false
    if(!this.props.show) {
      return null;
    }
    
    // The gray background
    const backdropStyle = {
      position: 'fixed',
      top: 0,
      bottom: 0,
      left: 0,
      right: 0,
      backgroundColor: 'rgba(0,0,0,0.3)',
      padding: 50
    };

    // The modal "window"
    const modalStyle = {
      backgroundColor: '#fff',
      borderRadius: 5,
      maxWidth: 500,
      minHeight: 300,
      margin: '0 auto',
      padding: 30
    };

    return (
      <div className="backdrop" style={backdropStyle}>
        <div className="modal" style={modalStyle}>
          {this.props.children}

          <div className="footer">
            <button onClick={this.props.onClose}>
              Close
            </button>
          </div>
        </div>
      </div>
    );
  }
}

Modal.propTypes = {
  onClose: React.PropTypes.func.isRequired,
  show: React.PropTypes.bool,
  children: React.PropTypes.node
};

export default Modal;

Popularity 10/10 Helpfulness 3/10 Language javascript

Source: www.codeproject.com

Tags: javascript

Link to this answer
Share Copy Link

Contributed on Jun 29 2022

akileus

0 Answers Avg Quality 2/10

Closely Related Answers

modal in react

Comment

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width='device-width', initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button onclick="my_dialog.showModal()">Open Dialog</button>

    <dialog id="my_dialog">
        <h1>MY HEADER</h1>
        <div>
            <h5>MY ONE</h5>
            <h5>MOYE MOYE</h5>
        </div>
        <button onclick="my_dialog.close()">Close Dialog</button>
    </dialog>
  </body>
</html>

Popularity 10/10 Helpfulness 2/10 Language javascript

Source: Grepper

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Dec 06 2023

Abhishek

0 Answers Avg Quality 2/10

modal in react

Comment

import React from "react";
export default class Modal extends React.Component {
  render() {
    return <div>Hello Modal</div>;
  }
}

Popularity 9/10 Helpfulness 1/10 Language javascript

Source: blog.bitsrc.io

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Jan 31 2022

Wide-eyed Wryneck

0 Answers Avg Quality 2/10

React Modal using Dialog

Comment

// MORE ON THE GITHUB REPO, LINK ATTACHED TO SOURCE
// https://github.com/kouqhar/react-modal

import { forwardRef, useImperativeHandle, useRef, useState } from "react";
import { createPortal } from "react-dom";

import styles from "./styles/styles.module.css"

const Modal = forwardRef(function Modal({ text }, ref) {
    const [modalText, setModalText] = useState('')
    const dialog = useRef();
    const ModalTextRef = useRef()

    function showModalText() {
        let inputValue = ModalTextRef.current.value

        // Validation and Sanitization
        if (typeof inputValue === "string") {
            setModalText(inputValue.toString())
            ModalTextRef.current.value = ""
        } else return
    }

    // Exposing component APIs via the useImperativeHandle Hook
    // The method open is bound to the native showModal()
    useImperativeHandle(ref, () => {
        return {
            open() {
                dialog.current.showModal()
            }
        }
    })

    return createPortal(
        <dialog ref={dialog} className={styles.dialog_modal}>
            <p>Content for your modal goes in here.</p>
            <p>You can also recieve props <b>{text}</b></p>

            <div className={styles.display_text}>
                {text.trim().length > 1 && <p>{modalText}</p>}
            </div>

            <input
                ref={ModalTextRef}
                placeholder="Enter text you want to be show . . ." />

            <div className={styles.action_btn}>
                <form method="dialog">
                    <button>Close</button>
                </form>
                <button onClick={showModalText}>Show Text</button>
            </div>
        </dialog>,
        document.getElementById("react-modal"))
})

export default Modal

// With love @kouqhar

Popularity 2/10 Helpfulness 1/10 Language javascript

Source: github.com

Tags: javascript react-modal

Link to this answer
Share Copy Link

Contributed on Apr 18 2024

kouqhar

0 Answers Avg Quality 2/10

Modal Dialogs in React

Contents

More Related Answers

Modal Dialogs in React

Closely Related Answers

modal in react

modal in react

React Modal using Dialog

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.