❤
npm
Sign UpSign In

@mdbootstrap/react-modal-backdrop

1.0.0 • Public • Published

MDB Logo

MDB React 5

React Backdrop options for a responsive popup with Bootstrap 5. Prevent close on click outside with static backdrop, remove backdrop, enable interactivity & more.

Check out React Modal Backdrop Documentation for detailed instructions & even more examples.

Basic example

Basic example

import React, { useState } from 'react';
import {
  MDBBtn,
  MDBModal,
  MDBModalDialog,
  MDBModalContent,
  MDBModalHeader,
  MDBModalTitle,
  MDBModalBody,
  MDBModalFooter,
} from 'mdb-react-ui-kit';

export default function App() {
  const [basicModal, setBasicModal] = useState(false);

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

  return (
    <>
      <MDBBtn onClick={toggleShow}>LAUNCH DEMO MODAL</MDBBtn>
      <MDBModal show={basicModal} setShow={setBasicModal} tabIndex='-1'>
        <MDBModalDialog>
          <MDBModalContent>
            <MDBModalHeader>
              <MDBModalTitle>Modal title</MDBModalTitle>
              <MDBBtn className='btn-close' color='none' onClick={toggleShow}></MDBBtn>
            </MDBModalHeader>
            <MDBModalBody>...</MDBModalBody>

            <MDBModalFooter>
              <MDBBtn color='secondary' onClick={toggleShow}>
                Close
              </MDBBtn>
              <MDBBtn>Save changes</MDBBtn>
            </MDBModalFooter>
          </MDBModalContent>
        </MDBModalDialog>
      </MDBModal>
    </>
  );
}

How to use?

  1. Download MDB 5 - FREE REACT 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

More examples(click on the image to see a live demo)

Static Backdrop:

React Modal Backdrop #1

No Backdrop:

React Modal Backdrop #2

You can find other examples here.

More extended React documentation

Readme

Keywords

Package Sidebar

Install

npm i @mdbootstrap/react-modal-backdrop

Repository

github.com/mdbootstrap/react-modal-backdrop

Homepage

mdbootstrap.com/docs/react/extended/modal-backdrop

Weekly Downloads

1

Version

1.0.0

License

MIT

Unpacked Size

295 kB

Total Files

17

Last publish

Collaborators

  • mdbootstrap
Try on RunKit
Report malware