Home Reactjs React Modals: Introduction, Overview With Examples

React Modals: Introduction, Overview With Examples

0
243
React Modals

Introduction About React Modals:

React Modals help you add dialogs to your site for lightboxes, user notifications, or completely custom content. 

 

Overview of React Modals: 

 

      Models are positioned over everything else in the document and remove scroll from the <body> so that modal content scrolls instead.

      They are unmounted when closed. 

      Bootstrap only supports one modal window at a time. Nested modals are not supported, but if you really need them, the underlying react-overlays can support them if you are willing. 

      Modal’s trap focuses on them, ensuring the keyboard navigation cycles through the modal, and not the rest of the page. 

      Unlike vanilla Bootstrap, autofocus works in Modals because react handles the implementation. 

 Examples

 Static Markup

Given below is a static modal dialog (without the positioning) to demonstrate the look and feel of the Modal. 

 

<Modal.Dialog>

  <Modal.Header closeButton>

    <Modal.Title>Modal title</Modal.Title>

  </Modal.Header>

 

  <Modal.Body>

    <p>Modal body text goes here.</p>

  </Modal.Body>

 

  <Modal.Footer>

    <Button variant=”secondary”>Close</Button>

    <Button variant=”primary”>Save changes</Button>

  </Modal.Footer>

</Modal.Dialog>

 

Live Demo: 

A modal with header, body, and set of actions in the footer. 

Use <Modal/> in combination with other components to show or hide your Modal. 

The <Modal/> component comes with a few convenient “subcomponents”: 

<Modal.Header/>, <Modal.Title/>, <Modal.Body/>, and <Modal.Footer/>, which you can use to build the Modal. 

 

function Example() {

  const [show, setShow] = useState(false);

 

  const handleClose = () => setShow(false);

  const handleShow = () => setShow(true);

 

  return (

    <>

      <Button variant=”primary” onClick={handleShow}>

        Launch demo modal

      </Button>

 

      <Modal show={show} onHide={handleClose}>

        <Modal.Header closeButton>

          <Modal.Title>Modal heading</Modal.Title>

        </Modal.Header>

        <Modal.Body>Woohoo, you’re reading this text in a modal!</Modal.Body>

        <Modal.Footer>

          <Button variant=”secondary” onClick={handleClose}>

            Close

          </Button>

          <Button variant=”primary” onClick={handleClose}>

            Save Changes

          </Button>

        </Modal.Footer>

      </Modal>

    </>

  );

}

 

render(<Example />);

 

 

Static Backdrop-

When the backdrop is set to static, the modal will not close when clicking outside it Click the button below to try it. 

 

function Example() {

  const [show, setShow] = useState(false);

 

  const handleClose = () => setShow(false);

  const handleShow = () => setShow(true);

 

  return (

    <>

      <Button variant=”primary” onClick={handleShow}>

        Launch static backdrop modal

      </Button>

 

      <Modal

        show={show}

        onHide={handleClose}

        backdrop=”static”

        keyboard={false}

      >

        <Modal.Header closeButton>

          <Modal.Title>Modal title</Modal.Title>

        </Modal.Header>

        <Modal.Body>

          I will not close if you click outside me. Don’t even try to press

          escape key.

        </Modal.Body>

        <Modal.Footer>

          <Button variant=”secondary” onClick={handleClose}>

            Close

          </Button>

          <Button variant=”primary”>Understood</Button>

        </Modal.Footer>

      </Modal>

    </>

  );

}

 

render(<Example />);

 

Without Animation: 

A modal can also be without an animation. For that set the “animation” prop to false. 

 

function Example() {

  const [show, setShow] = useState(false);

 

  const handleClose = () => setShow(false);

  const handleShow = () => setShow(true);

 

  return (

    <>

      <Button variant=”primary” onClick={handleShow}>

        Launch demo modal

      </Button>

 

      <Modal show={show} onHide={handleClose} animation={false}>

        <Modal.Header closeButton>

          <Modal.Title>Modal heading</Modal.Title>

        </Modal.Header>

        <Modal.Body>Woohoo, you’re reading this text in a modal!</Modal.Body>

        <Modal.Footer>

          <Button variant=”secondary” onClick={handleClose}>

            Close

          </Button>

          <Button variant=”primary” onClick={handleClose}>

            Save Changes

          </Button>

        </Modal.Footer>

      </Modal>

    </>

  );

}

 

render(<Example />);

 

Additional Import Options- 

The Modal Header. Title, Body, and Footer components are available as static properties the <Modal/> component, but you can also, import them directly like: require(“react-bootstrap/ModalHeader”).

 

Vertically centered-

You can vertically center a modal bypassing the “centered” prop.

 

function MyVerticallyCenteredModal(props) {

  return (

    <Modal

      {…props}

      size=”lg”

      aria-labelledby=”contained-modal-title-vcenter”

      centered

    >

      <Modal.Header closeButton>

        <Modal.Title id=”contained-modal-title-vcenter”>

          Modal heading

        </Modal.Title>

      </Modal.Header>

      <Modal.Body>

        <h4>Centered Modal</h4>

        <p>

          Cras mattis consectetur purus sit amet fermentum. Cras justo odio,

          dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac

          consectetur ac, vestibulum at eros.

        </p>

      </Modal.Body>

      <Modal.Footer>

        <Button onClick={props.onHide}>Close</Button>

      </Modal.Footer>

    </Modal>

  );

}

 

function App() {

  const [modalShow, setModalShow] = React.useState(false);

 

  return (

    <>

      <Button variant=”primary” onClick={() => setModalShow(true)}>

        Launch vertically centered modal

      </Button>

 

      <MyVerticallyCenteredModal

        show={modalShow}

        onHide={() => setModalShow(false)}

      />

    </>

  );

}

 

render(<App />);

 

Using the Grid- 

You can use grid layouts within a model using regular grid components inside the modal content. 

 

function MydModalWithGrid(props) {

  return (

    <Modal {…props} aria-labelledby=”contained-modal-title-vcenter”>

      <Modal.Header closeButton>

        <Modal.Title id=”contained-modal-title-vcenter”>

          Using Grid in Modal

        </Modal.Title>

      </Modal.Header>

      <Modal.Body className=”show-grid”>

        <Container>

          <Row>

            <Col xs={12} md={8}>

              .col-xs-12 .col-md-8

            </Col>

            <Col xs={6} md={4}>

              .col-xs-6 .col-md-4

            </Col>

          </Row>

 

          <Row>

            <Col xs={6} md={4}>

              .col-xs-6 .col-md-4

            </Col>

            <Col xs={6} md={4}>

              .col-xs-6 .col-md-4

            </Col>

            <Col xs={6} md={4}>

              .col-xs-6 .col-md-4

            </Col>

          </Row>

        </Container>

      </Modal.Body>

      <Modal.Footer>

        <Button onClick={props.onHide}>Close</Button>

      </Modal.Footer>

    </Modal>

  );

}

 

function App() {

  const [modalShow, setModalShow] = useState(false);

 

  return (

    <>

      <Button variant=”primary” onClick={() => setModalShow(true)}>

        Launch modal with grid

      </Button>

 

      <MydModalWithGrid show={modalShow} onHide={() => setModalShow(false)} />

    </>

  );

}

 

render(<App />);

 

Optional Sizes- 

You can specify a bootstrap large or small modal by using the “size” prop. 

 

function Example() {

  const [smShow, setSmShow] = useState(false);

  const [lgShow, setLgShow] = useState(false);

 

  return (

    <>

      <Button onClick={() => setSmShow(true)}>Small modal</Button>{‘ ‘}

      <Button onClick={() => setLgShow(true)}>Large modal</Button>

      <Modal

        size=”sm”

        show={smShow}

        onHide={() => setSmShow(false)}

        aria-labelledby=”example-modal-sizes-title-sm”

      >

        <Modal.Header closeButton>

          <Modal.Title id=”example-modal-sizes-title-sm”>

            Small Modal

          </Modal.Title>

        </Modal.Header>

        <Modal.Body>…</Modal.Body>

      </Modal>

      <Modal

        size=”lg”

        show={lgShow}

        onHide={() => setLgShow(false)}

        aria-labelledby=”example-modal-sizes-title-lg”

      >

        <Modal.Header closeButton>

          <Modal.Title id=”example-modal-sizes-title-lg”>

            Large Modal

          </Modal.Title>

        </Modal.Header>

        <Modal.Body>…</Modal.Body>

      </Modal>

    </>

  );

}

 

render(<Example />);

 

 

Sizing Modals using custom CSS- 

You can apply custom css to the modal dialog div using the “dialogClassName” prop. Example is using a custom css class with width set to 90%. 

 

function Example() {

  const [show, setShow] = useState(false);

 

  return (

    <>

      <Button variant=”primary” onClick={() => setShow(true)}>

        Custom Width Modal

      </Button>

 

      <Modal

        show={show}

        onHide={() => setShow(false)}

        dialogClassName=”modal-90w”

        aria-labelledby=”example-custom-modal-styling-title”

      >

        <Modal.Header closeButton>

          <Modal.Title id=”example-custom-modal-styling-title”>

            Custom Modal Styling

          </Modal.Title>

        </Modal.Header>

        <Modal.Body>

          <p>

            Ipsum molestiae natus adipisci modi eligendi? Debitis amet quae unde

            commodi aspernatur enim, consectetur. Cumque deleniti temporibus

            ipsam atque a dolores quisquam quisquam adipisci possimus

            laboriosam. Quibusdam facilis doloribus debitis! Sit quasi quod

            accusamus eos quod. Ab quos consequuntur eaque quo rem! Mollitia

            reiciendis porro quo magni incidunt dolore amet atque facilis ipsum

            deleniti rem!

          </p>

        </Modal.Body>

      </Modal>

    </>

  );

}

 

render(<Example />);

 

API Modal- 

 

Import Modal from ‘react-bootstrap/Modal’ 

 

NameTypeDefaultDescription
animationbooleantrueOpen and close the Modal with a slide and fade animation.
aria-labelledbyany
autoFocusbooleantrueWhen true The modal will automatically shift focus to itself when it opens, and replace it to the last focused element when it closes. Generally this should never be set to false as it makes the Modal less accessible to assistive technologies, like screen-readers.
backdrop‘static’ | true | falsetrueInclude a backdrop component. Specify ‘static’ for a backdrop that doesn’t trigger an “onHide” when clicked.
backdropClassNamestringAdd an optional extra class name to .modal-backdrop It could end up looking like class=”modal-backdrop foo-modal-backdrop in”.
centeredbooleanvertically center the Dialog in the window
containerany
dialogAselementType<ModalDialog>A Component type that provides the modal content Markup. This is a useful prop when you want to use your own styles and markup to create a custom modal component.
dialogClassNamestringA css class to apply to the Modal dialog DOM node.
enforceFocusbooleantrueWhen true The modal will prevent focus from leaving the Modal while open. Consider leaving the default value here, as it is necessary to make the Modal work well with assistive technologies, such as screen readers.
keyboardbooleantrueClose the modal when escape key is pressed
managerobjectA ModalManager instance used to track and manage the state of open Modals. Useful when customizing how modals interact within a container
onEnterfunctionCallback fired before the Modal transitions in
onEnteredfunctionCallback fired after the Modal finishes transitioning in
onEnteringfunctionCallback fired as the Modal begins to transition in
onEscapeKeyDownfunctionA callback fired when the escape key, if specified in keyboard, is pressed.
onExitfunctionCallback fired right before the Modal transitions out
onExitedfunctionCallback fired after the Modal finishes transitioning out
onExitingfunctionCallback fired as the Modal begins to transition out
onHidefunctionA callback fired when the header closeButton or non-static backdrop is clicked. Required if either are specified.
onShowfunctionA callback fired when the Modal is opening.
restoreFocusbooleantrueWhen true The modal will restore focus to previously focused element once modal is hidden
restoreFocusOptionsshapeOptions passed to focus function when restoreFocus is set to true
scrollablebooleanAllows scrolling the <Modal.Body> instead of the entire Modal when overflowing.
showbooleanfalseWhen true The modal will show itself.
size‘sm’ | ‘lg’,’xl’Render a large, extra large or small modal.
bsPrefixstring‘modal’Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.

 

 

Modal Dialog- 

Import ModalDialog from ‘react-bootstrap/ModalDialog’

 

NameTypeDefaultDescription
centeredbooleanSpecify whether the Component should be vertically centered
scrollablebooleanAllows scrolling the <Modal.Body> instead of the entire Modal when overflowing.
size‘sm’ | ‘lg’,’xl’Render a large, extra large or small modal.
bsPrefixstring‘modal’Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.

  

Modal Header

import ModalHeader from ‘react-bootstrap/ModalHeader’

 

NameTypeDefaultDescription
closeButtonbooleanfalseSpecify whether the Component should contain a close button
closeLabelstring‘Close’Provides an accessible label for the close button. It is used for Assistive Technology when the label text is not readable.
onHidefunctionA Callback fired when the close button is clicked. If used directly inside a Modal component, the onHide will automatically be propagated up to the parent Modal onHide.
bsPrefixstringChange the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.

 

 

Modal Title- 

Import ModalTitle from ‘react-bootstrap/ModalTitle’

 

NameTypeDefaultDescription
aselementType<DivStyledAsH4>You can use a custom element type for this component.
bsPrefixrequiredstring‘modal-title’Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.

 

 

Modal Body- 

Import ModalBody from ‘react-bootstrap/ModalBody’. 

 

NameTypeDefaultDescription
aselementType<div>You can use a custom element type for this component.
bsPrefixrequiredstring‘modal-body’Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.

 

 

Modal Footer- 

Import ModalFooter from ‘react-bootstrap/ModalFooter’

 

NameTypeDefaultDescription
aselementType<div>You can use a custom element type for this component.
bsPrefixrequiredstring‘modal-footer’Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.

 

 

No Comments

Leave A Reply

Please enter your comment!
Please enter your name here