Modal

Creating flexible modal dialogs can be achieved using the Modal component. They feature a series of helpful subcomponents, sizes and various other options that you can use to customize the display and behavior of your modals.

import React from "react";
import { Button, Modal, ModalBody, ModalHeader } from "shards-react";

export default class BasicModalExample extends React.Component {
  constructor(props) {
    super(props);
    this.state = { open: false };
    this.toggle = this.toggle.bind(this);
  }

  toggle() {
    this.setState({
      open: !this.state.open
    });
  }

  render() {
    const { open } = this.state;
    return (
      <div>
        <Button onClick={this.toggle}>Click Me!</Button>
        <Modal open={open} toggle={this.toggle}>
          <ModalHeader>Header</ModalHeader>
          <ModalBody>👋 Hello there!</ModalBody>
        </Modal>
      </div>
    );
  }
}

Modal Size

The modal's size can be adjusted via the size prop. You can use sm for small and lg for large.

import React from "react";
import { Button, Modal, ModalBody, ModalHeader } from "shards-react";

export default class ModalSizeExample extends React.Component {
  constructor(props) {
    super(props);
    this.state = { open: false };
    this.toggle = this.toggle.bind(this);
  }

  toggle() {
    this.setState({
      open: !this.state.open
    });
  }

  render() {
    const { open } = this.state;
    return (
      <div>
        <Button onClick={this.toggle}>Small Modal!</Button>
        <Modal size="sm" open={open} toggle={this.toggle}>
          <ModalHeader>Header</ModalHeader>
          <ModalBody>👋 Hello there!</ModalBody>
        </Modal>
      </div>
    );
  }
}

Props

The following props are available for the Modal component.

Prop	Description	Type	Default	Required
id	The id.	`String`	-	No
className	The class name.	`String`	-	No
open	Whether it is open, or not.	`Bool`	`false`	No
fade	Whether it should fade, or not.	`Bool`	`true`	No
backdrop	Whether it should display a backdrop, or not.	`Bool`	`true`	No
showModal	The function that should be triggered when the modal is shown.	`Func`	-	No
hideModal	The function that should be triggered when the modal is set to hide.	`Func`	-	No
hiddenModal	The function that should be triggered when the modal is finally hidden.	`Func`	-	No
centered	Whether it should be centered, or not.	`Bool`	-	No
backdropClassName	The class name for the backdrop element.	`String`	-	No
toggle	The toggle function.	`Func`	-	No
modalClassName	The class name for the modal.	`String`	-	No
animation	-	`Bool`	-	No
position	The position.	`String`	-	No
size	The size.	`String`	-	No
tabIndex	The tab index.	`String`	-	No
modalContentClassName	The class name for the modal content.	`String`	-	No
role	The role attribute for the modal.	`String`	`"dialog"`	No
children	The children nodes.	`Array[Node]Node`	-	No

Subcomponents

The following subcomponents are available for the Modal component.

<ModalBody/>

Prop	Description	Type	Default	Required
className	The class name.	`String`	-	No
children	The children nodes.	`Array[Node]Node`	-	No

<ModalFooter/>

Prop	Description	Type	Default	Required
className	The class name.	`String`	-	No
children	The children nodes.	`Array[Node]Node`	-	No

<ModalHeader/>

Prop	Description	Type	Default	Required
className	The class name.	`String`	-	No
toggle	The toggle function.	`Func`	-	No
tag	The component's tag type.	`String`	`"h5"`	No
closeAriaLabel	The close button's aria label.	`String`	`"Close"`	No
titleClass	The class for the modal title.	`String`	-	No
children	The children nodes.	`Array[Node]Node`	-	No