Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/mdbootstrap/react-dialog

Responsive React Dialog built with Bootstrap 5. Examples of dialog box UI for confirm & reject dialog popups, alert dialogs & more.
https://github.com/mdbootstrap/react-dialog

bootstrap bootstrap-modal bootstrap-template bootstrap-theme bootstrap5 css html jsx react-bootstrap react-modal reactjs

Last synced: 3 days ago
JSON representation

Responsive React Dialog built with Bootstrap 5. Examples of dialog box UI for confirm & reject dialog popups, alert dialogs & more.

Awesome Lists containing this project

README 

        

Responsive React Dialog built with Bootstrap 5. Examples of dialog box UI for confirm & reject dialog popups, alert dialogs & more.



Dialog is a mobile-friendly popup for showing additional content, alerts, confirmation prompts etc.



Check out [React Bootstrap Dialog Documentation](https://mdbootstrap.com/docs/react/extended/dialog/) for detailed instructions & even more examples.



## Basic dialog window



```jsx

import React, { useState } from "react";

import {

  MDBBtn,

  MDBModal,

  MDBModalDialog,

  MDBModalContent,

  MDBModalHeader,

  MDBModalTitle,

  MDBModalBody,

  MDBModalFooter,

  MDBContainer,

} from "mdb-react-ui-kit";



export default function Basic() {

  const [basicModal, setBasicModal] = useState(false);



  const toggleShow = () => setBasicModal(!basicModal);



  return (

    <>

      

        LAUNCH DEMO DIALOG

        

          

            

              

                Modal title

                

              

              ...



              

                

                  Close

                

                Save changes

              

            

          

        

      

    >

  );

}



```



## How to use?



1. Download MDB React - free UI KIT



2. Choose your favourite customized component and click on the image



3. Copy & paste the code into your MDB project



[▶️ Subscribe to YouTube channel for web development tutorials & resources](https://www.youtube.com/MDBootstrap?sub_confirmation=1)



___



## More extended Bootstrap documentation