Modal

The Modal component is used to render a Dialog in the user interface above an overlay. Modals blocks interaction on the page until it is closed or clicked on the action buttons. Genarally used if you want to prompt the user with something.

Usage#

const ButtonModal = () => {
  const [open, setOpen] = useState(false);
  return (
    <div>
      <Button onClick={() => setOpen(true)}>Open Modal</Button>
      <Modal open={open} onClose={() => setOpen(false)} header="Dialog Title">
        <div>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
          minim veniam, quis nostrud .
        </div>
      </Modal>
    </div>
  );
};

Custom Modal Intent#

The Modal component has five display type which can be mentioned using the type prop. By default the alert has type as undefined, so no type related css will be applied. The alert component also has a label prop which is used to render the main text of the response

default
success
info
warning
danger

Detachable Header and Footer#

The header and footer of the modal is detachable to remove header just don't add the header prop and for removing the footer just make hideFooter prop true

const ButtonModal = () => {
  const [open, setOpen] = useState(false);
  return (
    <div style={{ padding: "10px 0px 20px 0px" }}>
      <Button onClick={() => setOpen(true)}>No Header Footer Modal</Button>
      <Modal open={open} onClose={() => setOpen(false)} hideFooter={true}>
        <div>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
          minim veniam, quis nostrud .
        </div>
      </Modal>
    </div>
  );
};

Customizable Action Buttons#

The action button names can be customized by using the object props primaryButton & secondaryButton. These two props accept an object and it has name and type prop which you can use to customize the buttons

const ButtonModal = () => {
  const [open, setOpen] = useState(false);
  return (
    <div style={{ padding: "10px 0px 20px 0px" }}>
      <Button onClick={() => setOpen(true)}>Custom Action Names</Button>
      <Modal
        open={open}
        onClose={() => setOpen(false)}
        header="Dialog Title"
        primaryButton={{
          name: "Ok",
          type: "danger",
        }}
        secondaryButton={{
          name: "Cancel",
          type: "danger",
        }}
      >
        <div>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
          minim veniam, quis nostrud .
        </div>
      </Modal>
    </div>
  );
};

Actions#

The two action buttons can perform certain actions the secondaryButton the onClose function you pass whereas the primaryButton calls the onConfirm action

const ButtonModal = () => {
  const [open, setOpen] = useState(false);
  return (
    <div style={{ padding: "10px 0px 20px 0px" }}>
      <Button onClick={() => setOpen(true)}>Open Modal</Button>
      <Modal
        open={open}
        onClose={() => setOpen(false)}
        onConfirm={() => {
          alert("Are you sure ?");
          setOpen(false);
        }}
        header="Dialog Title"
      >
        <div>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
          minim veniam, quis nostrud .
        </div>
      </Modal>
    </div>
  );
};

API#

Prop	Type	Possible values	Default Value
size	`string`	`"small"`,`"medium"` and `"large"`	`"medium"`
header	`string`	Any string value	--
type	`string`	`"default"`, `"success"`, `"info"`, `"danger"` and `"warning"`	`default`
hideFooter	`boolean`	`true` and `false`	false
open	`boolean`	`true` and `false`	false
onClose - Used when secondary button is clicked	`()=>void`	--	--
onConfirm - Used when primary button is clicked	`()=>void`	--	--
primaryButton	`object`	{name:`string`,type:`Button types`}	`{name:'Confirm',type:'info'}`
secondaryButton	`object`	{name:`string`,type:`Button types`}	`{name:'Cancel',type:'info'}`

Built by Akshay 🤙